Python SVG Icon Engine + SVG Auto-Animator Script Output Tests
Screen recording and animation of test outputs.
Icon Engine is a Python-based program designed to generate SVG and PNG images with precision and efficiency. Leveraging code-driven aesthetics, it transforms algorithmic patterns into scalable vector graphics or raster images, ideal for digital media and conceptual art projects. The tool enables custom, reproducible icon creation, seamlessly integrating into experimental design workflows. Its command-line interface and scriptable architecture make it a robust asset for designers seeking automated, high-quality output in their visual storytelling.
Procedural SVG Animation Study — Grok-Driven Kinetic Minimalism
An experimental SVG animation that merges mathematical precision with procedural design, using Grok to generate motion from pure geometry. The piece explores symmetry, oscillation, and digital breath through concentric forms—where each curve becomes both signal and silence.
SVG Auto-Animator
Introducing an advanced tool designed to elevate your SVG assets through automated animation workflows. The SVG Auto-Animator ingests SVG files, meticulously scans each asset, and applies dynamic animations—ranging from precise stylistic transformations to controlled chaos effects—leveraging the full spectrum of available animation styles.
By automating this process, BlackMonolith streamlines the creation of vibrant, interactive graphics that seamlessly blend glitch aesthetics and experimental visuals. Whether enhancing digital media projects or conceptual art installations, the SVG Auto-Animator ensures consistency, creativity, and efficiency in bringing static vectors to immersive life.
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 8192 8192">
<defs>
<defs id="autoanim-defs">
<!-- Soft glow using Gaussian blur and merge -->
<filter id="fGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Optional soft blur filter (for future effects) -->
<filter id="fSoftBlur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.2"/>
</filter>
</defs>
</defs>
<style><style>
/* --- Motion (looping) --- */
@keyframes fadein { 0%{opacity:0} 100%{opacity:1} }
@keyframes slideup { 0%{opacity:0; transform:translateY(10px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes draw { to { stroke-dashoffset:0 } }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin360 { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes jitter {
0%{ transform: translate(0,0) }
25%{ transform: translate(0.8px,-0.6px) }
50%{ transform: translate(-0.7px,0.9px) }
75%{ transform: translate(0.6px,0.4px) }
100%{ transform: translate(0,0) }
}
@keyframes ripple { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:.75} }
@keyframes dashflow { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }
*[class*="ani-"], *[class*="fx-"] {
transform-box: fill-box; /* make transforms relative to element bbox */
transform-origin: center; /* consistent rotation/scaling */
}
.ani-fade { animation: fadein 1.92s ease-in-out infinite alternate }
.ani-slide-up { animation: slideup 1.92s ease-in-out infinite alternate }
.ani-draw { stroke-dasharray: 500; stroke-dashoffset: 500; animation: draw 2.56s ease-in-out infinite alternate }
.ani-pulse { animation: pulse 2.24s ease-in-out infinite alternate }
.ani-float { animation: floaty 3.21s ease-in-out infinite alternate }
.ani-soft { animation: fadein 3.21s ease-in-out infinite alternate }
/* --- FX (looping) --- */
@keyframes huecycle { 0%{ filter:hue-rotate(0deg) } 100%{ filter:hue-rotate(360deg) } }
@keyframes glowpulse { 0%,100%{ opacity:1 } 50%{ opacity:.9 } } /* filter is static via url(#fGlow) */
@keyframes spin { 0%{ transform:rotate(0deg) } 100%{ transform:rotate(360deg) } }
.fx-hue { animation: huecycle 5.13s linear infinite }
.fx-glow { filter: url(#fGlow); animation: glowpulse 2.56s ease-in-out infinite alternate }
.fx-spin { animation: spin 6.41s linear infinite }
.fx-ripple { animation: ripple 3.21s ease-in-out infinite }
.fx-dash { stroke-dasharray: 6 6; animation: dashflow 1.60s linear infinite }
.fx-jitter { animation: jitter 1.80s ease-in-out infinite }
</style></style>
<circle cx="4096" cy="4096" r="1873" stroke="#F4F4F4" stroke-width="50.01220337516541" stroke-opacity="0.7512133009438238" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4096" cy="4096" r="2368" stroke="#F4F4F4" stroke-width="49.4972862735539" stroke-opacity="0.7787599098520129" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4096" cy="4096" r="2636" stroke="#F4F4F4" stroke-width="41.25245792332966" stroke-opacity="0.8710933065242893" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float fx-jitter"/>
<circle cx="4096" cy="4096" r="2937" stroke="#F4F4F4" stroke-width="52.51958986014607" stroke-opacity="0.6847610506866336" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-glow"/>
<circle cx="4096" cy="4096" r="3453" stroke="#F4F4F4" stroke-width="45.5105453259049" stroke-opacity="0.6312683156042224" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-hue"/>
<circle cx="4096" cy="4096" r="3691" stroke="#F4F4F4" stroke-width="35.229483049057464" stroke-opacity="0.707648094085332" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-glow"/>
<line x1="4096" y1="2129" x2="4096" y2="3211" stroke="#F4F4F4" stroke-width="73.60000000000001" stroke-opacity="1.0" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="3201" y1="4843" x2="3080" y2="4674" stroke="#C0B283" stroke-width="3.975291505391801" stroke-opacity="0.10216501570551262" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="4486" y1="4432" x2="4332" y2="4319" stroke="#F4F4F4" stroke-width="2.7028524123886326" stroke-opacity="0.12783295323962762" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="4575" y1="4888" x2="4511" y2="5042" stroke="#C0B283" stroke-width="6.225519237182582" stroke-opacity="0.1520847718333483" stroke-linecap="round" class="ani-draw ani-float fx-hue"/>
<circle cx="3386" cy="5272" r="97" stroke="#373737" stroke-width="6.805951247346989" stroke-opacity="0.07617239601478926" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4706" cy="3147" r="93" stroke="#F4F4F4" stroke-width="6.810693194095293" stroke-opacity="0.08545637996627667" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="4915" cy="4557" r="109" stroke="#373737" stroke-width="7.815798851639813" stroke-opacity="0.1133800967934703" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="3792" cy="4162" r="97" stroke="#CDA434" stroke-width="7.447063049542211" stroke-opacity="0.09638689457158789" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-glow"/>
<line x1="3497" y1="4291" x2="3488" y2="4413" stroke="#373737" stroke-width="5.609128267351128" stroke-opacity="0.16791330214156786" stroke-linecap="round" class="ani-draw ani-float"/>
<circle cx="3821" cy="3783" r="87" stroke="#CDA434" stroke-width="5.845837682402504" stroke-opacity="0.05716247911602188" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float fx-hue"/>
<line x1="4507" y1="3627" x2="4591" y2="3696" stroke="#C0B283" stroke-width="2.316572955164665" stroke-opacity="0.1533588184180742" stroke-linecap="round" class="ani-draw"/>
<line x1="3355" y1="3187" x2="3215" y2="3159" stroke="#373737" stroke-width="5.571847242410752" stroke-opacity="0.07999647324880568" stroke-linecap="round" class="ani-draw"/>
<circle cx="4062" cy="4559" r="79" stroke="#373737" stroke-width="3.6336287397261255" stroke-opacity="0.1350324513606003" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-hue"/>
<line x1="4425" y1="4465" x2="4356" y2="4490" stroke="#CDA434" stroke-width="2.846420385803798" stroke-opacity="0.07895859918085943" stroke-linecap="round" class="ani-draw"/>
<circle cx="5039" cy="4018" r="89" stroke="#F4F4F4" stroke-width="4.249142793750593" stroke-opacity="0.09173595720257795" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="3012" cy="4668" r="98" stroke="#373737" stroke-width="5.235185098448161" stroke-opacity="0.17725900474046358" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-glow"/>
<circle cx="3908" cy="4611" r="108" stroke="#CDA434" stroke-width="4.5598979450082675" stroke-opacity="0.19618671671425764" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="4096" cy="4096" r="650" stroke="#CDA434" stroke-width="5.89649455924658" stroke-opacity="0.16844660928235872" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4096" cy="4096" r="1137" stroke="#CDA434" stroke-width="4.214005352772818" stroke-opacity="0.16656309002455588" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float fx-hue"/>
<circle cx="4096" cy="4096" r="1625" stroke="#CDA434" stroke-width="2.267086314327755" stroke-opacity="0.1828076352995439" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4096" cy="4096" r="2112" stroke="#CDA434" stroke-width="6.913081111129917" stroke-opacity="0.15077691720780706" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-spin"/>
<circle cx="4096" cy="4096" r="2600" stroke="#CDA434" stroke-width="6.976141838371943" stroke-opacity="0.12143709050834528" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float fx-hue"/>
<polygon points="4635,4718 4570,4768 4501,4812 4428,4849 4351,4878 4272,4900 4191,4913 4109,4919" stroke="#CDA434" stroke-width="2.2169884445998354" stroke-opacity="0.8629451314554781" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw"/>
<polygon points="3873,5131 3828,5121 3784,5108 3741,5094 3698,5078 3656,5059 3615,5040 3574,5018 3535,4994 3497,4969 3459,4943 3423,4914" stroke="#CDA434" stroke-width="5.692685765596743" stroke-opacity="0.7403121502412566" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw ani-float"/>
<polygon points="2978,3987 2984,3932 2994,3878 3006,3824 3020,3771 3038,3718 3057,3667 3080,3616 3105,3567 3132,3519 3161,3472 3193,3427 3227,3383 3263,3341" stroke="#373737" stroke-width="4.303545445289538" stroke-opacity="0.6428475887167753" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw ani-float"/>
<polygon points="4114,5042 4019,5039 3925,5027 3832,5005 3743,4974 3657,4934 3575,4886 3498,4830 3428,4766" stroke="#F4F4F4" stroke-width="3.62829471221208" stroke-opacity="0.5048034276900063" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw ani-float"/>
<polygon points="3410,4774 3380,4742 3351,4709 3324,4675 3299,4640 3275,4603 3253,4565 3233,4527 3214,4487 3197,4447 3182,4406 3169,4364 3158,4322" stroke="#F4F4F4" stroke-width="2.2171186660992745" stroke-opacity="0.60029090482215" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw fx-spin fx-ripple"/>
<polygon points="3529,3225 3595,3186 3664,3151 3734,3122 3807,3098 3882,3079 3957,3066 4034,3059 4110,3057" stroke="#CDA434" stroke-width="5.599123133853192" stroke-opacity="0.7577434646174515" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw fx-glow"/>
<polygon points="3804,4891 3765,4876 3727,4859 3690,4840 3654,4819 3618,4796 3584,4772 3552,4746 3520,4718 3490,4689 3462,4659 3435,4627 3409,4593 3386,4559" stroke="#C0B283" stroke-width="4.470584215544945" stroke-opacity="0.5646239700590217" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw"/>
<polygon points="4706,4794 4649,4840 4589,4881 4526,4918 4460,4949 4392,4975 4322,4995 4251,5010 4179,5020 4106,5023 4033,5021 3961,5014 3889,5000 3819,4981" stroke="#CDA434" stroke-width="2.977170387358757" stroke-opacity="0.9278466184181077" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw ani-float"/>
<polygon points="2964,4169 2962,4102 2964,4035 2969,3968 2979,3901 2992,3835 3010,3771 3031,3707 3056,3644 3084,3584 3116,3525 3152,3468 3191,3413" stroke="#C0B283" stroke-width="2.36053015896131" stroke-opacity="0.5782836041659691" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw fx-hue"/>
<polygon points="3290,3260 3357,3200 3429,3145 3504,3096 3584,3054 3666,3017 3751,2987 3838,2964 3926,2947" stroke="#373737" stroke-width="3.8149892419079565" stroke-opacity="0.8208943907275736" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw ani-float"/>
<polygon points="4694,3240 4725,3263 4755,3286 4784,3311 4813,3337 4840,3364 4866,3391 4892,3420 4916,3450 4939,3480 4961,3511 4982,3544 5001,3576" stroke="#F4F4F4" stroke-width="5.5222864160914575" stroke-opacity="0.7342269487520701" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw fx-spin"/>
<polygon points="3694,3347 3742,3324 3791,3303 3842,3285 3894,3271 3946,3260 3999,3252 4053,3247 4106,3246 4160,3249 4213,3255 4266,3264" stroke="#CDA434" stroke-width="4.298045942982279" stroke-opacity="0.6984787431829751" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw fx-glow"/>
<polygon points="3193,4302 3181,4239 3173,4176 3170,4112 3171,4048 3176,3984 3186,3921 3200,3859 3219,3797" stroke="#CDA434" stroke-width="2.499360911381217" stroke-opacity="0.6373628845463905" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw ani-float fx-glow"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 8192 8192">
<style><style>
@keyframes fadein{0%{opacity:0}100%{opacity:1}}
@keyframes slideup{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ani-fade{animation:fadein 1.75s ease-in-out infinite alternate}
.ani-slide-up{animation:slideup 1.75s ease-in-out infinite alternate}
.ani-draw{stroke-dasharray:500;stroke-dashoffset:500;animation:draw 2.34s ease-in-out infinite alternate}
.ani-pulse{animation:pulse 2.04s ease-in-out infinite alternate;transform-origin:center}
.ani-float{animation:floaty 2.92s ease-in-out infinite alternate}
.ani-soft{animation:fadein 2.92s ease-in-out infinite alternate}
</style>
<style>@keyframes camshake{0%,100%{transform:translate(0)}25%{transform:translate(2px,1px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1px,-2px)}}svg{animation:camshake 1.7524752475247527s ease-in-out infinite alternate;transform-origin:center;}</style></style>
<circle cx="4096" cy="4096" r="2045" stroke="#FFD700" stroke-width="43.79262044465269" stroke-opacity="1.0" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<line x1="4096" y1="2051" x2="4096" y2="3311" stroke="#FFD700" stroke-width="70.06819271144431" stroke-opacity="1.0" stroke-linecap="round" class="ani-draw"/>
<circle cx="4485" cy="5315" r="86" stroke="#000000" stroke-width="3.5966438231425117" stroke-opacity="0.09251275423047128" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="3681" cy="4584" r="105" stroke="#FFD700" stroke-width="6.198758481775027" stroke-opacity="0.19899873827948128" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="5044" cy="3557" r="96" stroke="#000000" stroke-width="5.52383383584127" stroke-opacity="0.18748838688267289" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<line x1="3742" y1="3402" x2="3728" y2="3612" stroke="#2E2E2E" stroke-width="2.2230961281135038" stroke-opacity="0.06032203124122011" stroke-linecap="round" class="ani-draw"/>
<line x1="3696" y1="4172" x2="3811" y2="3966" stroke="#2E2E2E" stroke-width="6.650095863449072" stroke-opacity="0.1202928696358851" stroke-linecap="round" class="ani-draw"/>
<line x1="4576" y1="5089" x2="4455" y2="4839" stroke="#000000" stroke-width="5.262636110088434" stroke-opacity="0.16202480181294787" stroke-linecap="round" class="ani-draw ani-float"/>
<circle cx="3736" cy="4094" r="74" stroke="#000000" stroke-width="5.386071267711463" stroke-opacity="0.21232677275834622" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="2799" cy="3836" r="34" stroke="#FFD700" stroke-width="7.458795792147025" stroke-opacity="0.20293028245710293" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="3873" cy="4094" r="88" stroke="#000000" stroke-width="3.2939571097996305" stroke-opacity="0.16973035590135355" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="3585" cy="3124" r="71" stroke="#2E2E2E" stroke-width="5.335413948856067" stroke-opacity="0.11414197433075196" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="4178" cy="3645" r="119" stroke="#E53935" stroke-width="9.846483845233546" stroke-opacity="0.1340838681404998" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<line x1="3538" y1="4151" x2="3668" y2="4193" stroke="#E53935" stroke-width="2.5505831518352764" stroke-opacity="0.08170625216619537" stroke-linecap="round" class="ani-draw ani-float"/>
<circle cx="3814" cy="4242" r="35" stroke="#2E2E2E" stroke-width="3.6616431348014546" stroke-opacity="0.1462213682332574" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4514" cy="4777" r="107" stroke="#000000" stroke-width="9.629017914778224" stroke-opacity="0.12379841951576631" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<line x1="0" y1="0" x2="8192" y2="8192" stroke="#E53935" stroke-width="13.745702411205636" stroke-opacity="0.1547222498910006" stroke-linecap="butt" class="ani-draw"/>
<line x1="8192" y1="0" x2="0" y2="8192" stroke="#E53935" stroke-width="13.745702411205636" stroke-opacity="0.1547222498910006" stroke-linecap="butt" class="ani-draw"/>
<line x1="0" y1="0" x2="8192" y2="8192" stroke="#E53935" stroke-width="12.624507861235417" stroke-opacity="0.07766093273685878" stroke-linecap="butt" class="ani-draw"/>
<line x1="8192" y1="0" x2="0" y2="8192" stroke="#E53935" stroke-width="12.624507861235417" stroke-opacity="0.07766093273685878" stroke-linecap="butt" class="ani-draw ani-float"/>
<line x1="0" y1="0" x2="8192" y2="8192" stroke="#E53935" stroke-width="21.538304184836484" stroke-opacity="0.16660301369230132" stroke-linecap="butt" class="ani-draw"/>
<line x1="8192" y1="0" x2="0" y2="8192" stroke="#E53935" stroke-width="21.538304184836484" stroke-opacity="0.16660301369230132" stroke-linecap="butt" class="ani-draw ani-float"/>
<line x1="0" y1="0" x2="8192" y2="8192" stroke="#E53935" stroke-width="22.101877558556808" stroke-opacity="0.177432222088987" stroke-linecap="butt" class="ani-draw"/>
<line x1="8192" y1="0" x2="0" y2="8192" stroke="#E53935" stroke-width="22.101877558556808" stroke-opacity="0.177432222088987" stroke-linecap="butt" class="ani-draw ani-float"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 8192 8192">
<style><style>
@keyframes fadein{0%{opacity:0}100%{opacity:1}}
@keyframes slideup{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ani-fade{animation:fadein 2.59s ease-in-out infinite alternate}
.ani-slide-up{animation:slideup 2.59s ease-in-out infinite alternate}
.ani-draw{stroke-dasharray:500;stroke-dashoffset:500;animation:draw 3.45s ease-in-out infinite alternate}
.ani-pulse{animation:pulse 3.02s ease-in-out infinite alternate;transform-origin:center}
.ani-float{animation:floaty 4.31s ease-in-out infinite alternate}
.ani-soft{animation:fadein 4.31s ease-in-out infinite alternate}
</style>
<style>@keyframes camfocus{0%{transform:scale(1)}100%{transform:scale(1.491139393939394)}}svg{animation:camfocus 5.1724137931034475s ease-in-out infinite alternate;transform-origin:center;}</style></style>
<line x1="6412" y1="4541" x2="5850" y2="5673" stroke="#F4F4F4" stroke-width="59.876474021910504" stroke-opacity="0.8105001326064515" stroke-linecap="round" class="ani-draw"/>
<line x1="4931" y1="6302" x2="3608" y2="6404" stroke="#F4F4F4" stroke-width="57.01824828520082" stroke-opacity="0.7500944126389012" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="2645" y1="5956" x2="1868" y2="4873" stroke="#F4F4F4" stroke-width="50.241429884198396" stroke-opacity="0.9938357613344693" stroke-linecap="round" class="ani-draw"/>
<line x1="1801" y1="3548" x2="2133" y2="2787" stroke="#F4F4F4" stroke-width="52.15396848002722" stroke-opacity="0.8643234063332557" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="3346" y1="1858" x2="4571" y2="1785" stroke="#F4F4F4" stroke-width="44.63170113724766" stroke-opacity="0.8839508680237493" stroke-linecap="round" class="ani-draw"/>
<line x1="5721" y1="2385" x2="6323" y2="3319" stroke="#F4F4F4" stroke-width="43.06008900193752" stroke-opacity="0.8021309102082084" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="4096" y1="1736" x2="4096" y2="3152" stroke="#F4F4F4" stroke-width="64.26293753586211" stroke-opacity="1.0" stroke-linecap="round" class="ani-draw"/>
<circle cx="2929" cy="3899" r="49" stroke="#F4F4F4" stroke-width="7.423078834970482" stroke-opacity="0.184639131116761" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<line x1="4415" y1="5093" x2="4356" y2="5107" stroke="#F4F4F4" stroke-width="5.46547053698986" stroke-opacity="0.09883423545231312" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="4005" y1="3459" x2="4070" y2="3712" stroke="#F4F4F4" stroke-width="3.585453631446067" stroke-opacity="0.1437921767351359" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="4846" y1="3190" x2="5090" y2="3194" stroke="#F4F4F4" stroke-width="2.9075706640053527" stroke-opacity="0.07820820465780147" stroke-linecap="round" class="ani-draw"/>
<line x1="4069" y1="5480" x2="4189" y2="5671" stroke="#F4F4F4" stroke-width="5.49202276835222" stroke-opacity="0.13416767933026114" stroke-linecap="round" class="ani-draw"/>
<circle cx="3306" cy="3520" r="113" stroke="#F4F4F4" stroke-width="5.454606055254817" stroke-opacity="0.2164203124905799" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<line x1="4348" y1="4344" x2="4467" y2="4530" stroke="#373737" stroke-width="4.05891892638868" stroke-opacity="0.1222793204239113" stroke-linecap="round" class="ani-draw"/>
<circle cx="3743" cy="4583" r="35" stroke="#CDA434" stroke-width="8.47137685948376" stroke-opacity="0.2065490026423928" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="3773" cy="3544" r="65" stroke="#CDA434" stroke-width="4.428233777114426" stroke-opacity="0.13860045718307" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="5401" cy="3646" r="114" stroke="#F4F4F4" stroke-width="9.028212573433915" stroke-opacity="0.23569959586991868" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<line x1="3877" y1="4268" x2="3861" y2="4353" stroke="#C0B283" stroke-width="5.571706656149397" stroke-opacity="0.0799564024852285" stroke-linecap="round" class="ani-draw ani-float"/>
<circle cx="3897" cy="4516" r="103" stroke="#F4F4F4" stroke-width="9.149747658056103" stroke-opacity="0.21700164360932245" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4767" cy="5283" r="109" stroke="#C0B283" stroke-width="5.333794373979103" stroke-opacity="0.22630450141624564" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<line x1="4442" y1="3504" x2="4614" y2="3536" stroke="#F4F4F4" stroke-width="6.8543623736485495" stroke-opacity="0.14621818487185334" stroke-linecap="round" class="ani-draw"/>
<circle cx="4096" cy="4096" r="650" stroke="#CDA434" stroke-width="3.320107839195235" stroke-opacity="0.09522018757193107" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4096" cy="4096" r="1137" stroke="#CDA434" stroke-width="7.861622955222201" stroke-opacity="0.17434183163999456" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="4096" cy="4096" r="1625" stroke="#CDA434" stroke-width="6.89616033765169" stroke-opacity="0.18994834492349746" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="4096" cy="4096" r="2112" stroke="#CDA434" stroke-width="3.998508486823832" stroke-opacity="0.09211557197153594" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<circle cx="4096" cy="4096" r="2600" stroke="#CDA434" stroke-width="3.4845132451547345" stroke-opacity="0.16969210020748082" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<polygon points="4270,4823 4243,4829 4216,4834 4189,4838 4162,4841 4134,4843 4107,4844 4079,4843 4052,4842 4025,4840 3997,4837 3970,4833 3943,4828" stroke="#CDA434" stroke-width="4.9961609976203425" stroke-opacity="0.9488952542060252" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<polygon points="4547,3392 4600,3429 4649,3469 4695,3513 4738,3561 4777,3612 4812,3665 4843,3721 4869,3780 4891,3840 4908,3901 4921,3964 4929,4028 4931,4091" stroke="#373737" stroke-width="3.6943321661057342" stroke-opacity="0.60779702275945" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-soft"/>
<polygon points="3031,3782 3045,3737 3061,3693 3079,3649 3099,3607 3121,3565 3144,3525 3169,3485 3195,3446 3224,3409 3253,3373 3285,3338" stroke="#C0B283" stroke-width="2.0950229667511393" stroke-opacity="0.926765774857338" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<polygon points="3240,4284 3234,4251 3229,4217 3224,4184 3222,4150 3220,4117 3220,4083 3221,4049 3224,4016 3227,3982 3232,3949 3239,3916 3246,3883 3255,3851" stroke="#373737" stroke-width="4.2137493780765" stroke-opacity="0.5439966244251201" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<polygon points="4879,4519 4849,4572 4814,4623 4776,4671 4735,4716 4691,4758 4644,4798 4595,4834 4543,4866 4489,4895 4434,4920" stroke="#373737" stroke-width="4.174189440762068" stroke-opacity="0.7410916640428329" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<polygon points="3283,3159 3353,3103 3426,3052 3503,3007 3582,2967 3665,2933 3749,2905 3836,2883 3924,2868 4012,2859 4101,2856 4190,2860 4279,2870" stroke="#C0B283" stroke-width="3.852887992634878" stroke-opacity="0.9233845947260287" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-soft"/>
<polygon points="4423,4762 4363,4788 4302,4809 4239,4824 4174,4834 4110,4838 4045,4836 3980,4829 3916,4816 3854,4798" stroke="#C0B283" stroke-width="3.263030590129038" stroke-opacity="0.6597350997029672" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<polygon points="5254,4147 5250,4211 5242,4274 5230,4337 5215,4399 5196,4461 5175,4521 5149,4580 5121,4637 5090,4693 5055,4747" stroke="#F4F4F4" stroke-width="4.2388551215601575" stroke-opacity="0.5956065085823413" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-soft"/>
<polygon points="4940,3554 4969,3601 4995,3650 5018,3700 5038,3752 5056,3804 5070,3858 5082,3912 5091,3967 5096,4022 5099,4077" stroke="#C0B283" stroke-width="4.354844533321246" stroke-opacity="0.9487398775382634" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse"/>
<polygon points="5265,4485 5237,4560 5205,4633 5168,4704 5126,4772 5080,4837 5030,4900 4976,4958" stroke="#C0B283" stroke-width="4.170167196307808" stroke-opacity="0.5240152647385469" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-soft"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 8192 8192">
<defs>
<defs id="autoanim-defs">
<!-- Soft glow using Gaussian blur and merge -->
<filter id="fGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Optional soft blur filter (for future effects) -->
<filter id="fSoftBlur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.2"/>
</filter>
</defs>
</defs>
<style>
<
style>
/* --- Motion (looping) --- */
@keyframes fadein {
0% {
opacity:0
}
100% {
opacity: 1
}
}
@keyframes slideup {
0% {
opacity: 0;
transform:translateY(10px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes draw {
to {
stroke-dashoffset: 0
}
}
@keyframes pulse {
0%, 100% {
transform:scale(1)
}
50% {
transform: scale(1.05)
}
}
@keyframes floaty {
0%, 100% {
transform:translateY(0)
}
50% {
transform: translateY(-8px)
}
}
@keyframes spin360 {
0% {
transform:rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes jitter {
0% {
transform: translate(0, 0)
}
25% {
transform: translate(0.8px, -0.6px)
}
50% {
transform: translate(-0.7px, 0.9px)
}
75% {
transform: translate(0.6px, 0.4px)
}
100% {
transform: translate(0, 0)
}
}
@keyframes ripple {
0%, 100% {
transform: scale(1);
opacity:1
}
50% {
transform: scale(1.15);
opacity: .75
}
}
@keyframes dashflow {
0% {
stroke-dashoffset:0
}
100% {
stroke-dashoffset: 100
}
}
* [class * ="ani-"], * [class * ="fx-"] {
transform-box: fill-box;
/* make transforms relative to element bbox */
transform-origin: center;
/* consistent rotation/scaling */
}
.ani-fade {
animation: fadein 2.81s ease-in-out infinite alternate
}
.ani-slide-up {
animation: slideup 2.81s ease-in-out infinite alternate
}
.ani-draw {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 3.74s ease-in-out infinite alternate
}
.ani-pulse {
animation: pulse 3.28s ease-in-out infinite alternate
}
.ani-float {
animation: floaty 4.68s ease-in-out infinite alternate
}
.ani-soft {
animation: fadein 4.68s ease-in-out infinite alternate
}/* --- FX (looping) --- */
@keyframes huecycle {
0% {
filter:hue-rotate(0deg)
}
100% {
filter: hue-rotate(360deg)
}
}
@keyframes glowpulse {
0%, 100% {
opacity:1
}
50% {
opacity: .9
}
}/* filter is static via url(#fGlow) */
@keyframes spin {
0% {
transform:rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.fx-hue {
animation: huecycle 7.49s linear infinite
}
.fx-glow {
filter: url(#fGlow);
animation: glowpulse 3.74s ease-in-out infinite alternate
}
.fx-spin {
animation: spin 9.36s linear infinite
}
.fx-ripple {
animation: ripple 4.68s ease-in-out infinite
}
.fx-dash {
stroke-dasharray: 6 6;
animation: dashflow 2.34s linear infinite
}
.fx-jitter {
animation: jitter 2.62s ease-in-out infinite
}
@keyframes camshake {
0%, 100% {
transform:translate(0)
}
25% {
transform:translate(2px, 1px)
}
50% {
transform:translate(-2px, -1px)
}
75% {
transform: translate(1px, -2px)
}
}
svg {
animation: camshake 2.8079161816065197s ease-in-out infinite alternate;
transform-origin: center;
}
<
/style>
</style>
<circle cx="4096" cy="4096" r="1930" stroke="#6A9F7F" stroke-width="24.196821062169583" stroke-opacity="0.615624852171676" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float"/>
<circle cx="4096" cy="4096" r="2244" stroke="#6A9F7F" stroke-width="41.154804075062714" stroke-opacity="0.6228712280689087" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-spin"/>
<circle cx="4096" cy="4096" r="2711" stroke="#6A9F7F" stroke-width="38.692504031897016" stroke-opacity="0.6430302983202939" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-hue"/>
<circle cx="4096" cy="4096" r="3109" stroke="#6A9F7F" stroke-width="23.001489686689144" stroke-opacity="0.7255827298133752" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-float fx-jitter"/>
<line x1="4096" y1="2129" x2="4096" y2="3211" stroke="#6A9F7F" stroke-width="59.06991940791357" stroke-opacity="1.0" stroke-linecap="round" class="ani-draw ani-float"/>
<line x1="5331" y1="4728" x2="5433" y2="4721" stroke="#88C999" stroke-width="4.644515611275743" stroke-opacity="0.12758017026652324" stroke-linecap="round" class="ani-draw fx-glow fx-jitter"/>
<line x1="3207" y1="3917" x2="3017" y2="4096" stroke="#6A9F7F" stroke-width="4.652247349697461" stroke-opacity="0.05021800216174563" stroke-linecap="round" class="ani-draw fx-hue"/>
<line x1="3600" y1="3361" x2="3705" y2="3183" stroke="#6A9F7F" stroke-width="2.5957756810227894" stroke-opacity="0.0966706200421078" stroke-linecap="round" class="ani-draw ani-float fx-jitter"/>
<line x1="4745" y1="3307" x2="4708" y2="3365" stroke="#6A9F7F" stroke-width="5.814236570434468" stroke-opacity="0.06416928492469236" stroke-linecap="round" class="ani-draw ani-float"/>
<circle cx="3568" cy="3406" r="36" stroke="#F2E9D0" stroke-width="6.746494614568551" stroke-opacity="0.14922013502689824" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-ripple"/>
<circle cx="2929" cy="4238" r="110" stroke="#A46D4E" stroke-width="6.162108346823658" stroke-opacity="0.12687977135751974" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-dash"/>
<line x1="3031" y1="4413" x2="3010" y2="4242" stroke="#88C999" stroke-width="5.175998175465379" stroke-opacity="0.17594125827437274" stroke-linecap="round" class="ani-draw ani-float fx-glow"/>
<circle cx="4185" cy="4503" r="53" stroke="#A46D4E" stroke-width="3.8269059954968165" stroke-opacity="0.09081975926621588" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-hue"/>
<circle cx="4600" cy="4365" r="47" stroke="#A46D4E" stroke-width="8.970272186100944" stroke-opacity="0.24326756038705322" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-pulse fx-hue fx-ripple"/>
<line x1="4441" y1="3946" x2="4682" y2="4085" stroke="#6A9F7F" stroke-width="4.529154046826049" stroke-opacity="0.1971449642061508" stroke-linecap="round" class="ani-draw"/>
<path d="M 2296.0,3353.6 C 3058.2,2299.9 5237.2,4412.8 5896.0,3353.6" stroke="#F2E9D0" stroke-width="7.030394275232296" stroke-opacity="0.16567149089493216" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-opacity="0.0" class="ani-draw ani-float fx-spin"/>
</svg>
