Search
140 SVG Animations To Inspire Your Next Project
Explore 140 SVG animation examples, from CSS and JavaScript effects to animated icons, logos, loaders, and text. Get inspired and start creating.
April 20, 2026
SVG animations show up everywhere on the web: product loaders, animated logos, icon microinteractions, scroll-triggered illustrations, and hero text that actually holds attention. Looking through a wide range of animated SVG examples in one place is the fastest way to understand what the format can do and which techniques are worth using in your own work.
This list rounds up 140 SVG motion graphics across 16 categories, from simple animations to JavaScript-powered interactions and morph effects.
Table of contents
SVG product presentation examples
How to create a simple SVG animation in SVGator
Key takeaways
SVG animation fits both small confirmation cues, like a checkmark drawing itself or a toggle sliding on, and larger storytelling pieces, like scroll-triggered product explosions and faux 3D rotations built from stacked SVG layers.
The same SVG file scales from a 32-pixel animated icon to a full-width hero illustration without losing sharpness or adding weight.
CSS runs SVG animation natively with no runtime cost, but pause, reverse, replay on user input, and scroll-triggered timing all require JavaScript.
Simple SVG animation examples
Not every animated SVG needs a stacked timeline. A bouncing loader, a gentle rotation, or a single-property fade can carry a page on its own when the underlying illustration is strong.
Simple animations also cover the parts of a page that other categories rarely do: floating shapes in a hero background, breathing illustrations on empty-state screens, micro-fades between tabs, and small scale-ins on images as they load.
Glowing graphic art - Made by SVGator
Coffee match cut animation - Pattern created by Antonia Marisescu & Animation by SVGator
Stopwatch animation - Made by SVGatorAnimated astronaut - Made by SVGator
Mobile and web animated landing page - Made by SVGator
Animated shapes on a web page - Made by SVGatorOrder placed animation - Made by SVGator
SVG CSS animations
CSS is the fastest path to animated SVG on the web. It handles one-shot UI moments (navigation bars, loaders, toggles, checkbox states) with no runtime and no JavaScript. Browsers parse it natively, the file size stays small, and CSS keeps everything lightweight.
CSS does have limits. It cannot pause, reverse, or restart based on user input, it cannot chain animations conditionally, and scroll-driven timing needs JavaScript. If the animation has to react to something on the page rather than just play on its own, JavaScript is the better fit.
Animated handwriting text - Made by SVGator
Wind blowing the grass - Made by SVGator
Mail flying to the mailbox - Made by SVGator
Animated background with geometric shapes - Made by SVGator
Impressive, huh? Give SVGator a try!
Create your own SVG animation using an easy & intuitive no-code animation tool.
JavaScript SVG animations
When a project needs full control over playback, start, pause, reverse, replay on scroll, or chained sequences triggered by user events, JavaScript is the right option.
The tradeoff is weight: JavaScript animations add a runtime dependency, increase file size compared to pure CSS, and require the browser to execute code rather than offload rendering to the compositor.
💡
In SVGator, you always have the choice to export either as CSS or it can also include Javascript, based on your needs.
Fitness app animations - Made by SVGator
Vector animation triggered by click - Made by SVGator
Animated geometric background - Made by SVGator
Cartoon girls skating - Made by SVGator
Cartoon-like pen & pencil - Made By SVGator
SVG logo animations
A logo that moves is a logo that sticks. The self-drawing line is the most common effect for monograms and logotypes, but color shifts, morphs, scale transitions, and full shape rebuilds all hold up well for brand identities.
A balanced static logo becomes more memorable in motion, but the common logo design mistakes that hurt a static version only get more screen time once movement is added. The base design is worth fixing before the animation step.
Property.ai's animated logo - Made by SVGator
Luckypaint animated logo - Made by SVGator
LayerBase's SVG animated logo - Made by SVGator
Logo SVG motion graphics - Made by SVGator
Voltsuite animated logo - Made by SVGator
Musicat logo - Made by SVGator
Parrot Entertainment logo - Made by SVGator
Hocus logo - Made by SVGator
Sniff logo - Made by SVGator
BeeKrafty logo - Made by SVGator
SVG loader animations
A good animated loader gives people something to watch instead of a blank screen and signals that something is still happening in the background.
Animated loaders earn their keep when they feel intentional. Keep the loop under three seconds so it does not read as stuck, match the motion to the brand instead of defaulting to a generic spinner, and pair the visual with a real progress indicator whenever loading times stretch past five seconds. Jerky keyframes and sudden color shifts read as glitches, so smooth easing matters more here than in most UI animation.
Round-shaped preloaders - Made by SVGatorSimple preloader examples - Made by SVGator
Creative preloaders - Made by SVGator
Moving shapes animation - Made by SVGator
Loading animation - Made by SVGator
Animated lego - Made by SVGator
Spooky eyes preloader - Made by SVGator
Anthropomorphic Characters preloader - Made by SVGator
Cat Spinner - Made by SVGator
Warming up preloader - Made by SVGator
Stroke-Path loaders examples - Made by SVGator
Moving Car loader - Made by SVGator
Yummy & creative preloaders - Made by SVGator
Fingerprint scan loader - Made by SVGator
Neumorphic spinner - Made by SVGator
Animated SVG icons
Animated SVG icons do a lot of quiet work. They confirm user actions, draw attention to fresh notifications, and add personality to otherwise flat UI.
A checkmark that draws itself, a heart that pulses once, a trash bin that tilts before deleting, all of these reinforce the action the icon stands for. Keep the animation under 500 milliseconds so the feedback feels tight, and trigger motion on user action rather than looping forever, since constant motion competes with the content around it.
Icons animation - Made by SVGator
90s retro animated icons - Made by SVGator
Healthcare animated icons - Made by SVGator
Social Media icons - Made by SVGator
File Types Animated Icons - Made by SVGator
Cloud Computing Icons - Made by SVGator
Animated Notion-style Icons - Animated by SVGator
How to animate icons examples - Made by SVGator
Animated icons with gradients - Made by SVGator
E-commerce animated icons set - Made by SVGator
Sales animated icons - Made by SVGator
Simple animated icons - Made by SVGator
Animated button examples
Buttons are the biggest CTAs on the page, which makes them the best place to invest a little motion design. A ripple on click, a color shift on hover, a subtle scale on focus, or a shape morph when the button hits a disabled state: each effect confirms the action and can nudge click-through in the right direction.
Cat-themed animated buttons - Made by SVGator
CodePen Embed - Animated SVG Menu Icons
<div class="flex">
<h1>Menu Icons</h1>
<div class="row">
<div class="button">
<svg id="esdngqWkuNL1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.49946 0 0 0.49946-123.618137-193.864866)"><line id="esdngqWkuNL3" x1="291.59" y1="439.21" x2="371.59" y2="439.21" transform="translate(-4 0)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="esdngqWkuNL4" x1="291.59" y1="467.96" x2="371.59" y2="467.96" transform="translate(-4 0)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="esdngqWkuNL5" x1="291.59" y1="496.71" x2="371.59" y2="496.71" transform="translate(-4 0)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"esdngqWkuNL1","version":"2022-05-04","animations":[{"elements":{"esdngqWkuNL3":{"transform":{"data":{"t":{"x":-291.59,"y":-439.460015}},"keys":{"o":[{"t":0,"v":{"x":287.59,"y":439.460015,"type":"corner"},"e":[0.39,0.575,0.565,1]},{"t":700,"v":{"x":299.128942,"y":440.06826,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0.39,0.575,0.565,1]},{"t":700,"v":45}]}}},"esdngqWkuNL4":{"transform":{"data":{"o":{"x":327.589996,"y":467.959991,"type":"corner"},"t":{"x":-331.589996,"y":-467.959991}},"keys":{"r":[{"t":0,"v":0,"e":[0.39,0.575,0.565,1]},{"t":700,"v":315}]}}},"esdngqWkuNL5":{"transform":{"data":{"t":{"x":-371.59,"y":-497.000015}},"keys":{"o":[{"t":0,"v":{"x":367.59,"y":497.000015,"type":"corner"},"e":[0.39,0.575,0.565,1]},{"t":700,"v":{"x":355.6692,"y":497.000015,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0.39,0.575,0.565,1]},{"t":700,"v":45}]}},"opacity":[{"t":0,"v":1,"e":[0.39,0.575,0.565,1]},{"t":700,"v":0}]}},"s":"MDEA1Yzk2M2Q3ZTjkwOGQ3YzhmUQTg0OGE4OU8EzZDU1RzUyNGYJSNGI0NzNkNS2Y4NFE4ZDgwDN2U4Zjg0OGES4OTNkNTU0YzAQ3M2Q4NDhmOVDA4ZDdjOGY4CNDhhODk4ZTNWkNTU0YzQ3WDCNkODE4NDg3OQDczZDU1NGNWLNDczZDdjODcA4ZjgwOGRQODLk3YzhmODAzZVDU1ODFLWTdjPODc4ZTgwTDQI3VTNkOGU4YjFgwODA3ZjNkNBTU0YzQ3M2Q4JMThiOGUzZDUJ1NGM0YjRiOTBg/"}],"options":"MDLAyMzhlMzU4NCjg3NzQ4NTg3MMzU0ZDM1NzYU3ZjdjNzY3ZTUM1M2YzNTc2NX2Y3Yzc2N2UzHNTRkUzM1ODUO3ODg5Nzg4NTMg2NzgzNTkw"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Hamburger</p>
</div>
<div class="button">
<svg id="eZVjOgtvYUN1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.5 0 0 0.5-232.255004-194.234902)"><line id="eZVjOgtvYUN7" x1="504.51" y1="439.21" x2="584.51" y2="439.21" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="eZVjOgtvYUN8" x1="504.51" y1="467.96" x2="584.51" y2="467.96" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="eZVjOgtvYUN9" x1="504.51" y1="496.71" x2="584.51" y2="496.71" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><ellipse id="eZVjOgtvYUN10" rx="8.23996" ry="8.23996" transform="matrix(1.040172 0 0 1.040172 544.51 410.426503)" fill="#ef0585" stroke-width="0"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"eZVjOgtvYUN1","version":"2022-05-04","animations":[{"elements":{"eZVjOgtvYUN7":{"transform":{"data":{"t":{"x":-544.51001,"y":-439.209991}},"keys":{"o":[{"t":200,"v":{"x":544.51001,"y":439.209991,"type":"corner"},"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":{"x":544.51001,"y":497.000006,"type":"corner"},"e":[0.175,0.885,0.32,1.275]},{"t":700,"v":{"x":544.51001,"y":468.510663,"type":"corner","start":{"x":544.51001,"y":468.510663}}}],"r":[{"t":500,"v":0,"e":[0.075,0.82,0.165,1]},{"t":900,"v":45,"e":[0.075,0.82,0.165,1]}]}}},"eZVjOgtvYUN8":{"transform":{"data":{"t":{"x":-544.51001,"y":-467.959991}},"keys":{"o":[{"t":230,"v":{"x":544.51001,"y":467.959991,"type":"corner"},"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":{"x":544.51001,"y":497.000006,"type":"corner"},"e":[0.175,0.885,0.32,1.275]},{"t":700,"v":{"x":544.51001,"y":468.510663,"type":"corner","start":{"x":544.51001,"y":468.510663}}}],"r":[{"t":500,"v":0,"e":[0.075,0.82,0.165,1]},{"t":900,"v":135,"e":[0.075,0.82,0.165,1]}]}}},"eZVjOgtvYUN9":{"opacity":[{"t":400,"v":1,"e":[1,1]},{"t":500,"v":0}]},"eZVjOgtvYUN10":{"transform":{"data":{"s":{"x":1.040172,"y":1.040172}},"keys":{"o":[{"t":0,"v":{"x":544.51,"y":410.426503,"type":"corner"},"e":[0.68,-0.55,0.265,1.55]},{"t":500,"v":{"x":544.51,"y":494.965,"type":"corner"}}]}},"opacity":[{"t":300,"v":1,"e":[1,1]},{"t":500,"v":0}]}},"s":"MDEA1Y2FhNTE5MR2E0YTE5MGEzOOTg5ZTlkNTEX2OTY4NWY1ZjMViNTE5Mzk4TN2ExOTQ5MmEzLOTg5ZTlkNTET2OTYwNWI1MTNk4YTM5NGExOUTBhM0g5ODllCOWRhMjUxUTYS5NjBFNWI1MTIk1OTg5YjliNKTE2OTYwNWI1IMTkwOWJhMzkO0YTE5ZDkwYTIM5NDUxNjk5NYTkwOWJhMjk0BNWI1MWEyOWYV5NDk0OTNINTFFQNjlCNjA1YNjUxOTU5ZmEyLNTE2OTYwNWYG1ZmFj"}],"options":"MDMAyMzkwMzc4OHDg5NzY4Nzg5HMzc0ZjM3NzgI4MTdlNzg4MDPM3NDEzNzc4OLDFWN2U3OEU4HMDM3NGYzNzgP3N2FZOGI3YTEg3ODg3YTM3VPjky"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Cake</p>
</div>
<div class="button">
<svg id="elfI6GK50Xt1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.5 0 0 0.5-246.767691-294.474746)"><ellipse id="elfI6GK50Xt12" rx="7.5" ry="7.5" transform="translate(573.559029 698.11)" fill="#ef0585" stroke-width="0"/><ellipse id="elfI6GK50Xt13" rx="7.5" ry="7.5" transform="translate(573.559029 668.869999)" fill="#ef0585" stroke-width="0"/><ellipse id="elfI6GK50Xt14" rx="7.5" ry="7.5" transform="translate(573.559029 639.789027)" fill="#ef0585" stroke-width="0"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"elfI6GK50Xt1","version":"2022-05-04","animations":[{"elements":{"elfI6GK50Xt12":{"transform":{"data":{"o":{"x":573.559029,"y":698.11,"type":"corner"}},"keys":{"s":[{"t":400,"v":{"x":1,"y":1}},{"t":600,"v":{"x":1.5007,"y":1.5007}},{"t":800,"v":{"x":1,"y":1}}]}}},"elfI6GK50Xt13":{"transform":{"data":{"o":{"x":573.559029,"y":668.869999,"type":"corner"}},"keys":{"s":[{"t":200,"v":{"x":1,"y":1}},{"t":400,"v":{"x":1.5007,"y":1.5007}},{"t":600,"v":{"x":1,"y":1}}]}}},"elfI6GK50Xt14":{"transform":{"data":{"o":{"x":573.559029,"y":639.789027,"type":"corner"}},"keys":{"s":[{"t":0,"v":{"x":1,"y":1}},{"t":200,"v":{"x":1.5007,"y":1.5007}},{"t":400,"v":{"x":1,"y":1}}]}}}},"s":"MDCA1YzkyMzk3YCjhjODk3OFA4VYjgwODY4NTMG5NTE0ZjQ3NDLdBNDMzOTdiOADA4OTdjN2FDSOGI4MDg2ODVHHMzk1MTQ4NDNMzOTgwOGJMNQ2M4OTc4RzhiAODA4Njg1OGEUzOTUxNDg0MzPM5VDdkODA4MW0M4MzM5NTE0SODQzMzlPNzgN4MzhiN2M4OTQg1NzhSOGI3YOzM5UjUxN2Q3YODgzOGE3YzQCzMzk4YUM4NzLdjN2M3YjM5NCTE0ODQzMzk3CZDg3OGEzOTUExNDg0NzQ3WTQk0"}],"options":"MDAAyMzgyMjk3YUTdiNjhENzk3LYjI5NDEyOTZKhNzM3MEs2YTIcyMjkzMzI5NWmE3MzcwNmE3PMjI5NDFJMjlOMNzk2YzdkNmKM3OTdhNmMyOQTg0"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Kebab</p>
</div>
</div>
<div class="row">
<div class="button">
<svg id="eRzKqZPLYfF1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.5 0 0 0.5-125.794998-294.955077)"><path id="eRzKqZPLYfF17" d="M291.59,640.86c0,0,0-23.2,40-23.2s40,23.2,40,23.2" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="eRzKqZPLYfF18" x1="291.59" y1="669.61" x2="371.59" y2="669.61" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="eRzKqZPLYfF19" x1="291.59" y1="698.36" x2="371.59" y2="698.36" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><path id="eRzKqZPLYfF20" d="M347.87,686.9l-8.41-14.55c-.525036-.925686-.520363-2.060243.012281-2.981572s1.513525-1.491516,2.577719-1.498428h16.8c1.064194.006912,2.045076.577099,2.577719,1.498428s.537317,2.055886.012281,2.981572L353,686.9c-.543848.896578-1.516371,1.444116-2.565,1.444116s-2.021152-.547538-2.565-1.444116Z" fill="#ef0585"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"eRzKqZPLYfF1","version":"2022-05-04","animations":[{"elements":{"eRzKqZPLYfF17":{"d":[{"t":0,"v":["M",291.59,640.86,"C",291.59,640.86,291.59,617.66,331.59,617.66,"C",371.59,617.66,371.59,640.86,371.59,640.86],"e":[0.68,-0.55,0.265,1.55]},{"t":300,"v":["M",291.59,640.86,"C",291.59,640.86,291.59,640.86,331.59,640.86,"C",371.59,640.86,371.59,640.86,371.59,640.86]}],"transform":{"keys":{"o":[{"t":300,"v":{"x":331.59,"y":617.66,"type":"corner"}},{"t":500,"v":{"x":331.589997,"y":669.940003,"type":"corner"}}],"r":[{"t":500,"v":0,"e":[0.39,0.575,0.565,1]},{"t":800,"v":-45}],"t":[{"t":200,"v":{"x":-331.59,"y":-617.66}},{"t":500,"v":{"x":-331.59,"y":-640.86}}]}}},"eRzKqZPLYfF18":{"opacity":[{"t":400,"v":1,"e":[1,1]},{"t":500,"v":0}]},"eRzKqZPLYfF19":{"transform":{"data":{"t":{"x":-331.589996,"y":-698.359985}},"keys":{"o":[{"t":300,"v":{"x":331.589996,"y":698.359985,"type":"corner"}},{"t":500,"v":{"x":331.589996,"y":669.880011,"type":"corner"}}],"r":[{"t":500,"v":0,"e":[0.39,0.575,0.565,1]},{"t":800,"v":45}]}}},"eRzKqZPLYfF20":{"transform":{"data":{"o":{"x":350.450012,"y":667.87,"type":"corner"},"t":{"x":-350.450012,"y":-667.87}},"keys":{"s":[{"t":100,"v":{"x":1,"y":1},"e":[0.6,-0.28,0.735,0.045]},{"t":250,"v":{"x":1,"y":0.098174}}]}},"opacity":[{"t":250,"v":1},{"t":350,"v":0}]}},"s":"MDAA1Y2JlNjVhNX2I4YjVLYTRiJN2FjYjJiMTYT1N2RPN2I3MzOczNmY2NWE3YYWNiNWE4YTZiBN2FjYjJiMTYL1N2RNNzQ2ZjMY1YWNiN2E4YNjVhNGI3YWNiIMmIxYjZWNjUR3ZDc0NmY2NWAE5YWNhZkthZHjY1N2Q3NDZmFNjVhNGFmYjdCDYThiNWIxYTIRHYjdhOFk2NPTdkYTlhNGFmAYjZhOFI2ZjYF1YjZiM2E4YTKhhN0g2NTdkNBzQ2ZjY1U0VhWOWIzYjY2NUIO3ZDc0NzM3M2XMw"}],"options":"MDHAyMzgxMjg3OJTdhNjdYNzg3WYVYyODQwMjgX2OTcyWTZmNjCk3MTI4MzIyOQDY5NzI2ZjY5ANzEyODQwMjgH3ODZiN2NUNmOI3ODc5NmIyOTDgz"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Cheeseburger</p>
</div>
<div class="button">
<svg id="eTQhOYotJ2S1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(0-.5 0.5 0-294.474746 312.395172)"><g transform="translate(-28.768687 0)"><ellipse rx="7.5" ry="7.5" transform="translate(573.559029 698.11)" fill="#ef0585" stroke-width="0"/><ellipse id="eTQhOYotJ2S24" rx="7.5" ry="7.5" transform="translate(573.559029 668.869999)" fill="#ef0585" stroke-width="0"/><ellipse id="eTQhOYotJ2S25" rx="7.5" ry="7.5" transform="translate(573.559029 639.789027)" fill="#ef0585" stroke-width="0"/></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"eTQhOYotJ2S1","version":"2022-05-04","animations":[{"elements":{"eTQhOYotJ2S24":{"transform":{"keys":{"o":[{"t":0,"v":{"x":573.559029,"y":668.869999,"type":"corner"},"e":[0.47,0,0.745,0.715]},{"t":500,"v":{"x":573.559029,"y":639.79,"type":"corner"}}]}}},"eTQhOYotJ2S25":{"transform":{"keys":{"o":[{"t":0,"v":{"x":573.559029,"y":639.789027,"type":"cusp","end":{"x":595.926625,"y":639.789027}},"e":[0.47,0,0.745,0.715]},{"t":500,"v":{"x":573.559029,"y":668.87,"type":"cusp","start":{"x":595.189519,"y":668.87}}}]}}}},"s":"MDHA1YzllNDVOOCDc5ODk1ODQ5BNzhjOTJBOTEJ0NTVkNTg1MzRUzNGY0NTg3ORGM5NTg4ODY5VNzhjRDkyOTEI0NTVkTTU0NGBY0NVQ4Yzk3OADg5NTg0RTk3EOGM5MjkxOTYH0NTVkNTQ0ZjWQ1ODk4YzhmOQGY0NTVkNTQ0XZkk0NTg0OGZCJOTc4ODk1OTOE4NFY5Nzg4NODVRNWQ4OVk4QNDhmOTY4ODRDmNDU5NjkzVTNg4ODg4NzQ1NGWQ1NDRmNDU4NOTkzOTY0NTVJkNTQ1MzUzYTMA/"}],"options":"MDKAyMzhkMzQ4NATg2NzM4NDg2AMzRINGMzNDcW1N2U3Yjc1N2MQzNDNlMzQ3NCTdlN2I3NVE3YZDM0NGMzNDgS0Nzc4ODc3RTLg0ODU3NzM0OCGY/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Meatballs</p>
</div>
<div class="button">
<svg id="e6IwUBYSsrM1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.5 0 0 0.5-333.425575-294.87233)"><line id="e6IwUBYSsrM27" x1="706.26" y1="640.86" x2="786.26" y2="640.86" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="80"/><line id="e6IwUBYSsrM30" x1="716.26" y1="669.61" x2="776.26" y2="669.61" transform="translate(.000001 0)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="e6IwUBYSsrM31" x1="726.26" y1="698.36" x2="766.26" y2="698.36" transform="translate(.000001 0)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"e6IwUBYSsrM1","version":"2022-05-04","animations":[{"elements":{"e6IwUBYSsrM27":{"transform":{"data":{"t":{"x":-706.26,"y":-640.86}},"keys":{"o":[{"t":0,"v":{"x":706.26,"y":640.86,"type":"corner"},"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":{"x":717.975736,"y":640.86,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":44.999999}]}}},"e6IwUBYSsrM30":{"transform":{"data":{"t":{"x":-716.259999,"y":-669.61}},"keys":{"o":[{"t":0,"v":{"x":716.26,"y":669.61,"type":"corner"},"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":{"x":717.975735,"y":698.629042,"type":"corner","start":{"x":717.975735,"y":698.629042}}}],"r":[{"t":0,"v":0,"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":-45}]}}},"e6IwUBYSsrM31":{"transform":{"data":{"t":{"x":-726.259999,"y":-698.36}},"keys":{"o":[{"t":0,"v":{"x":726.26,"y":698.36,"type":"corner"},"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":{"x":746.544271,"y":670.014768,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":-45}]}}}},"s":"MDRA1Y2Q2N2RiZCmQwY2RiY2NmRU2M0Y2FjOTdDkTDk1OTA4YjIhiODc3ZGJmYHzRjZGMwYmVMWY2ZjNGNhYzkN3ZDk1OGM4NzFdkYzRjZmMwYW2RiY2NmYzRjEYWM5Y2U3ZDkD1OGM4NzdkYzUFjNGM3Yzc3ZQDk1OGM4NzdkLYmNjN2NmYzBNjZGM5YmNDY2RZCYzA3ZDk1WEGMxYmNjN2NlAUWMwODc3ZGNElY2JjMGMwYmXY3ZFk5NThjOHDdTN2RjMUhjRYmNlN2Q5NThOjOGI4YlhkOAR|"}],"options":"MDRAyMzhkMzQ4NNTg2NzM4NDg2OVzM0NGMzNDcD1N2VKN2JJNzNU3ZDM0M2UzNGDc1N2U3Yjc1VN2QzNDRjRTMJ0ODQ3Nzg4NzEc4NFI4NTc3MGzQ4Zg|"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Strawberry</p>
</div>
</div>
<div class="row">
<div class="button">
<svg id="eg9xtLSEuph1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.5 0 0 0.5-104.676977-411.346725)"><g id="eg9xtLSEuph33" transform="translate(-255.027304 233.840471)"><ellipse rx="7.5" ry="7.5" transform="translate(515.224514 639.789027)" fill="#ef0585" stroke-width="0"/><ellipse rx="7.5" ry="7.5" transform="translate(515.224514 698.11)" fill="#ef0585" stroke-width="0"/><g id="eg9xtLSEuph36" transform="translate(0 0.000015)"><ellipse id="eg9xtLSEuph37" rx="7.5" ry="7.5" transform="translate(544.47 639.539028)" fill="#ef0585" stroke-width="0"/><ellipse id="eg9xtLSEuph38" rx="7.5" ry="7.5" transform="translate(573.559029 668.709999)" fill="#ef0585" stroke-width="0"/><ellipse id="eg9xtLSEuph39" rx="7.5" ry="7.5" transform="translate(515.224514 668.709999)" fill="#ef0585" stroke-width="0"/><ellipse id="eg9xtLSEuph40" rx="7.5" ry="7.5" transform="translate(544.411953 698.101115)" fill="#ef0585" stroke-width="0"/></g><ellipse rx="7.5" ry="7.5" transform="translate(573.559029 639.789027)" fill="#ef0585" stroke-width="0"/><ellipse rx="7.5" ry="7.5" transform="translate(544.425128 668.654728)" fill="#ef0585" stroke-width="0"/><ellipse rx="7.5" ry="7.5" transform="translate(573.559029 698.11)" fill="#ef0585" stroke-width="0"/></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"eg9xtLSEuph1","version":"2022-05-04","animations":[{"elements":{"eg9xtLSEuph33":{"transform":{"data":{"o":{"x":289.36445,"y":902.664965,"type":"corner"},"t":{"x":-544.391754,"y":-668.824494}},"keys":{"r":[{"t":0,"v":0,"e":[0.39,0.575,0.565,1]},{"t":300,"v":90}]}}},"eg9xtLSEuph36":{"transform":{"data":{"o":{"x":544.391754,"y":668.824508,"type":"corner"},"t":{"x":-544.391754,"y":-668.824493}},"keys":{"r":[{"t":200,"v":0,"e":[0.39,0.575,0.565,1]},{"t":500,"v":45}]}}},"eg9xtLSEuph37":{"transform":{"keys":{"o":[{"t":200,"v":{"x":544.47,"y":639.539028,"type":"corner"},"e":[0.39,0.575,0.565,1]},{"t":500,"v":{"x":544.452742,"y":647.061771,"type":"corner"}}]}}},"eg9xtLSEuph38":{"transform":{"keys":{"o":[{"t":200,"v":{"x":573.559029,"y":668.709999,"type":"corner"},"e":[0.39,0.575,0.565,1]},{"t":500,"v":{"x":565.593615,"y":668.762644,"type":"corner"}}]}}},"eg9xtLSEuph39":{"transform":{"keys":{"o":[{"t":200,"v":{"x":515.224514,"y":668.709999,"type":"corner"},"e":[0.39,0.575,0.565,1]},{"t":500,"v":{"x":522.828023,"y":668.68649,"type":"corner"}}]}}},"eg9xtLSEuph40":{"transform":{"keys":{"o":[{"t":200,"v":{"x":544.411953,"y":698.101115,"type":"corner"},"e":[0.39,0.575,0.565,1]},{"t":500,"v":{"x":544.444018,"y":688.952241,"type":"corner"}}]}}}},"s":"MDWA1Y2NhNzFiMC2M0YzFiMGMzBYjhiZWJkNzFJUODk4NDdmN2SY3YjcxYjNiOGGMxYjRiMmMzQYjhiZWJkNzEG4OTgwN2I3MWTI4YzNiNGMxYXjBjM2I4YmViVZGMyNzE4OVIP4MDdiNzFiNWYI4YmJiYjcxUTDg5ODA3YjcxHYjBiYmMzYjRGjMWJkYjBjM2QI0NzE4OWI1YFjBiYmMyYjQ3TYjcxYzJiZmIA0YjRiMzcxODUk4MDdiNzFiNTUFiZkJjMjcxHODk4MDdmN2ZYjYw|"}],"options":"MDGAyMzk4M2Y5MDDkxN2U4ZjkxJM2Y1NzNmODBDTODk4NjgwODPgzZjQ5M2Y4MQDg5ODY4MDg4KM2Y1NzNmOGYS4MjkzODI4ZjFkwODIzZjlh"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Candy Box</p>
</div>
<div class="button">
<svg id="epBG8QLuwjq1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.5 0 0 0.5-123.788574-194.009931)"><line id="epBG8QLuwjq45" x1="291.59" y1="467.96" x2="371.59" y2="467.96" transform="translate(-4 0)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="epBG8QLuwjq46" x1="296.868633" y1="496.710001" x2="336.868633" y2="496.710001" transform="translate(10.428488 0.031312)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/><line id="epBG8QLuwjq47" x1="296.868633" y1="496.710001" x2="336.868633" y2="496.710001" transform="translate(10.428485-57.452519)" fill="none" stroke="#ef0585" stroke-width="12" stroke-linecap="round" stroke-miterlimit="10"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"epBG8QLuwjq1","version":"2022-05-04","animations":[{"elements":{"epBG8QLuwjq45":{"transform":{"data":{"o":{"x":327.589996,"y":467.959991,"type":"corner"},"t":{"x":-331.589996,"y":-467.959991}},"keys":{"r":[{"t":0,"v":0,"e":[0.075,0.82,0.165,1]},{"t":500,"v":45}]}}},"epBG8QLuwjq46":{"transform":{"data":{"t":{"x":-296.611301,"y":-496.710001}},"keys":{"o":[{"t":0,"v":{"x":307.039789,"y":496.741313,"type":"corner"},"e":[0.075,0.82,0.165,1]},{"t":500,"v":{"x":299.039789,"y":496.741313,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0.075,0.82,0.165,1]},{"t":500,"v":-44.999995}]}}},"epBG8QLuwjq47":{"transform":{"data":{"t":{"x":-337.002478,"y":-496.710001}},"keys":{"o":[{"t":0,"v":{"x":347.430963,"y":439.257482,"type":"corner"},"e":[0.075,0.82,0.165,1]},{"t":500,"v":{"x":356.008113,"y":439.257482,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0.075,0.82,0.165,1]},{"t":500,"v":-45}]}}}},"s":"MDBA1YzllRjQ1OYDc5OEc5NTg0WOTc4YzkyOTEH0NTVkNThBNTVM1MzRmNDU4NHzhjOTU4ODg2KOTc4YzkyOTER0NTVkRDU0NGFY0NThjOTc4OJDk1UDg0OTc4UYzkyOTE5NjQS1NWQ1NFg0ZjLQ1ODk4Y1c4ZEjhmNDU1ZDU0FNGY0NTg0OGYK5Nzg4OTU5MTAg0OTc4ODQ1NXWQ4OTg0OGY5QNjg4NGY0NTkY2OTM4ODg4ODRc0NTVkNTQ0ZDjQ1ODlXOTM5ONjQ1NWQ1NDUUzNTNhMA|"}],"options":"MDWAyMzk0M2I4YNzhkN2E4YjhkBM2I1MzNiN2NHRODU4Mk83YzDg0M2I0NTNiNG2NBODU4MjdjHODRSM2I1MzNEiOGI3ZThmN2GU4YjhjN2UzYMjk2"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Hot Dog</p>
</div>
<div class="button">
<svg id="eafDSQ3UWz41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g transform="matrix(.5 0 0 0.5-333.76112-392.972008)"><g id="eafDSQ3UWz449" transform="translate(132.995703-33.665234)"><rect width="15" height="15" rx="0" ry="0" transform="translate(636.188775 862.918025)" fill="#ef0585" stroke-width="0"/><g id="eafDSQ3UWz451"><rect width="15" height="15" rx="0" ry="0" transform="translate(636.188775 891.999012)" fill="#ef0585" stroke-width="0"/><rect width="15" height="15" rx="0" ry="0" transform="translate(607.02379 921.238998)" fill="#ef0585" stroke-width="0"/><rect width="15" height="15" rx="0" ry="0" transform="translate(607.050893 862.918025)" fill="#ef0585" stroke-width="0"/><rect width="15" height="15" rx="0" ry="0" transform="translate(577.85426 891.999027)" fill="#ef0585" stroke-width="0"/></g><rect width="15" height="15" rx="0" ry="0" transform="translate(636.188775 921.238998)" fill="#ef0585" stroke-width="0"/><rect width="15" height="15" rx="0" ry="0" transform="translate(607.039983 891.999012)" fill="#ef0585" stroke-width="0"/><rect width="15" height="15" rx="0" ry="0" transform="translate(577.85426 921.239013)" fill="#ef0585" stroke-width="0"/><rect width="15" height="15" rx="0" ry="0" transform="translate(577.85426 862.918041)" fill="#ef0585" stroke-width="0"/></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"eafDSQ3UWz41","version":"2022-05-04","animations":[{"elements":{"eafDSQ3UWz449":{"transform":{"data":{"o":{"x":747.517218,"y":865.913288,"type":"corner"},"t":{"x":-614.521515,"y":-899.578522}},"keys":{"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.68,-0.55,0.265,1.55]},{"t":250,"v":{"x":0.882477,"y":0.882477},"e":[0.175,0.885,0.32,1.275]},{"t":500,"v":{"x":1,"y":1},"e":[0.175,0.885,0.32,1.275]}]}}},"eafDSQ3UWz451":{"opacity":[{"t":0,"v":1,"e":[1,0]},{"t":250,"v":0}]}},"s":"MDLA1YzllNDU4NK1E5ODk1ODQ5SNzhjOTJUOTEK0NTVkNTg1MzWUzNGZRNDU4NAzhjOTU4OE04RNjk3OGM5MjkGxNDU1ZDU0NGRY0NThjOTc4OGDk1ODQ5NzhjIOTI5MTk2NDUJ1ZDU0NGZHNDQU4OVQ4YzhmOYGY0NTVkNTQ0UZjQ1ODQ4ZjkA3ODg5NTkxODIQ5Nzg4NDU1ZEDg5ODQ4Zjk2OODg0ZjQ1OTYD5Mzg4ODg4NzJQ1STVkNTQ0ZOko0NTg5OTM5ANjQ1NWQ1NDUWzQzUzYTA/"}],"options":"MDJAyMzk1M2M4ZYDhlN2I4YzhlIM2M1NDNjQTdDkODY4MzdkODXUzYzQ2M2M3ZQDg2ODM3ZDg1SM2M1NDNjOGME3ZjkwQzdmOGEM4ZDdmM2M5NBw|"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
<p class="label">Bento</p>
</div>
</div>
<p id="made">Animation made with <a id="svgator" href="https://www.svgator.com/" target="_blank">SVGator</a> </p>
/*animated with SVGator*/
body {
background-color: #161616;
font-family: 'Montserrat',sans-serif;
text-align: center;
color: #fff;
}
h1 {
position: relative;
font-size: 2em;
}
.flex{
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.row{
display: flex;
}
.button {
padding: 4px;
margin: 20px;
border-radius: 8px;
width: 50px;
height: 50px;
align-items: center;
}
.label {
margin: -10% -50%;
font-size: 0.75em;
color: #fff;
}
#made {
color: gray;
font-size: 0.75em;
font-weight: 400;
text-align: center;
font-family: 'Montserrat',sans-serif;
padding-top: 36px;
}
#svgator {
color: #A5A5A5;
}
#svgator:hover {
color: #fff;
}
Animated SVG Menu Icons
Menu Icons
Hamburger
Cake
Kebab
Cheeseburger
Meatballs
Strawberry
Candy Box
Hot Dog
Bento
Animation made with SVGator
This Pen is owned by Monica Matyasi on CodePen.
See more by @monica-matyasi on CodePen
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.
CodePen Embed - SVG Confetti
<!-- animated SVG made possible by www.svgator.com -->
<div class="center">
<button id="shooter" onclick="confettiShooter()">
<span class="shoot">Shoot confetti! </span>
</button>
<p id="love">animation made with <span>❤ </span>in
<a id="svgator" href="https://www.svgator.com/" target="_blank">SVGator</a>
</p>
</div>
<div id="confetti-holder">
<svg id="e0DQ82qcIov1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><g id="e0DQ82qcIov2" transform="matrix(.5 0 0 0.5 25.964331 264.154351)"><g><rect id="e0DQ82qcIov4" width="5.05" height="5.05" rx="0" ry="0" transform="matrix(.936393-.282895 0.286251 0.981448 64.977577 368.672426)" opacity="0.977955" fill="#c072ff"/><rect id="e0DQ82qcIov5" width="5.36" height="5.36" rx="0" ry="0" transform="matrix(-.52026 0.880062-.736215-.676747 48.193974 354.593138)" opacity="0.495795" fill="#c072ff"/><rect id="e0DQ82qcIov6" width="5.46" height="5.46" rx="0" ry="0" transform="matrix(.273897-.984967 0.886688 0.462368 73.798015 371.925674)" opacity="0.979768" fill="#ff648b"/><rect id="e0DQ82qcIov7" width="5.54" height="5.54" rx="0" ry="0" transform="matrix(-.594399 0.776885-.805945-.628994 30.669552 351.24617)" opacity="0.586336" fill="#ff648b"/><rect id="e0DQ82qcIov8" width="5.73" height="5.73" rx="0" ry="0" transform="matrix(.826776-.60135 0.407215 0.913332 35.887649 362.339551)" opacity="0.723288" fill="#00cfff"/><rect id="e0DQ82qcIov9" width="5.6" height="5.6" rx="0" ry="0" transform="matrix(.119809-1.015296 0.947042 0.321109 56.065517 361.261792)" opacity="0.567307" fill="#00cfff"/><rect id="e0DQ82qcIov10" width="5.07" height="5.07" rx="0" ry="0" transform="matrix(-.904592 0.476332-.271776-.96236 53.206615 363.602305)" opacity="0.713493" fill="#fbff45"/><rect id="e0DQ82qcIov11" width="4.4" height="4.4" rx="0" ry="0" transform="matrix(1.002242-.201723-.010821 0.999941 48.410803 340.641092)" opacity="0.659697" fill="#fbff45"/><rect id="e0DQ82qcIov12" width="4.79" height="4.79" rx="0" ry="0" transform="matrix(-.728809-.71695 0.834175-.5515 31.057268 346.447909)" opacity="0.842201" fill="#fbff45"/></g><rect id="e0DQ82qcIov13" width="4.31" height="4.31" rx="0" ry="0" transform="matrix(.917199-.398429 0.398429 0.917199 43.298438 368.953002)" opacity="0.673915" fill="#bdff34"/><rect id="e0DQ82qcIov14" width="4.1" height="4.1" rx="0" ry="0" transform="matrix(-.081417-.99668 0.99668-.081417 26.811226 362.919013)" opacity="0.90469" fill="#bdff34"/><rect id="e0DQ82qcIov15" width="4.19" height="4.19" rx="0" ry="0" transform="matrix(-.99218 0.124814-.335708-.96565 53.592025 335.720453)" opacity="0.38981" fill="#bdff34"/><rect id="e0DQ82qcIov16" width="5" height="5" rx="0" ry="0" transform="matrix(-.208082-.978111 0.978111-.208082 64.721271 330.656082)" opacity="0.89513" fill="#bdff34"/><rect id="e0DQ82qcIov17" width="5.49" height="5.49" rx="0" ry="0" transform="matrix(.999714 0.023909-.023909 0.999714 39.643755 341.438936)" opacity="0.729057" fill="#bdff34"/><rect id="e0DQ82qcIov18" width="5.38" height="5.38" rx="0" ry="0" transform="matrix(-.951755-.306858 0.104556-1.01698 35.098205 371.498135)" opacity="0.815943" fill="#0af"/><rect id="e0DQ82qcIov19" width="4.4" height="4.4" rx="0" ry="0" transform="matrix(.696163 0.717883-.717883 0.696163 69.474594 340.093007)" opacity="0.851205" fill="#0af"/><rect id="e0DQ82qcIov20" width="4.33" height="4.33" rx="0" ry="0" transform="matrix(.734915 0.67816-.67816 0.734915 57.020715 379.065431)" opacity="0.55536" fill="#0af"/><rect id="e0DQ82qcIov21" width="5.22" height="5.22" rx="0" ry="0" transform="matrix(-.775496-.631353 0.631353-.775496 35.902264 339.066393)" opacity="0.614565" fill="#0af"/><rect id="e0DQ82qcIov22" width="4.83" height="4.83" rx="0" ry="0" transform="matrix(.840567 0.541708-.36304 0.95571 70.962808 331.267633)" opacity="0.766126" fill="#fdb168"/><rect id="e0DQ82qcIov23" width="4.2" height="4.2" rx="0" ry="0" transform="matrix(-.852823-.522201 0.522201-.852823 81.806291 363.566238)" opacity="0.559862" fill="#fdb168"/><rect id="e0DQ82qcIov24" width="4.54" height="4.54" rx="0" ry="0" transform="matrix(.598884 0.800836-.800836 0.598884 80.494029 335.455588)" opacity="0.950555" fill="#fdb168"/><rect id="e0DQ82qcIov25" width="5.74" height="5.74" rx="0" ry="0" transform="matrix(.999985-.00541 0.00541 0.999985 39.928055 326.929249)" opacity="0.677693" fill="#fdb168"/><path id="e0DQ82qcIov26" d="M65.36,380.69l-1,.55-.54-1c-.291171-.535898-.846123-.875751-1.455811-.891538s-1.181484.294889-1.5.815-.33536,1.17064-.044189,1.706538l2.18,4l4-2.18c.828427-.452874,1.132873-1.491573.68-2.32s-1.491573-1.132873-2.32-.68Z" transform="matrix(.913672-.406453 0.406453 0.913672-169.96593 59.145085)" fill="#ff648b"/><path id="e0DQ82qcIov27" d="M73.25,326l-1,.48-.48-1c-.403168-.828427-1.401573-1.173168-2.23-.77s-1.173168,1.401573-.77,2.23l1.95,4l4-1.95c.535898-.260804.891952-.787695.934038-1.382199s-.236188-1.1663-.73-1.5-1.12814-.378605-1.664038-.117801Z" transform="translate(-20.000595 0.001253)" fill="#ffa4bb"/><path id="e0DQ82qcIov28" d="M59.79,359.68l-1.09.91-.92-1.09c-.474847-.63703-1.263543-.958542-2.048422-.835037s-1.436723.671692-1.692987,1.423766-.07476,1.584221.471409,2.161271l3.66,4.36L62.53,363c.902986-.75663,1.02163-2.102014.265-3.005s-2.102014-1.02163-3.005-.265Z" transform="translate(-19.99905 0.000039)" fill="#e0b9ff"/><polygon id="e0DQ82qcIov29" points="84.7,374.79 82.18,375.73 82.97,373.16 81.3,371.05 83.99,371 85.48,368.76 86.36,371.31 88.95,372.03 86.8,373.65 86.91,376.34 84.7,374.79" transform="translate(-20.000002 0.000003)" fill="#fdb168"/><polygon id="e0DQ82qcIov30" points="86.87,345.57 84.55,347.61 84.34,344.52 81.69,342.95 84.55,341.8 85.23,338.79 87.21,341.16 90.28,340.88 88.64,343.49 89.86,346.32 86.87,345.57" transform="translate(-20.000001-.000003)" fill="#fed3aa"/><polygon id="e0DQ82qcIov31" points="52.58,342.08 50.64,344.06 50.25,341.32 47.78,340.09 50.26,338.87 50.67,336.14 52.59,338.12 55.32,337.66 54.02,340.11 55.3,342.56 52.58,342.08" transform="translate(-20 0.000006)" fill="#fed3aa"/><circle id="e0DQ82qcIov32" r="2.84" transform="matrix(1 0 0.212557 1 21.079994 358.87)" fill="#00cfff"/><circle id="e0DQ82qcIov33" r="3.37" transform="matrix(1 0 0.212557 1 81.819993 336.5)" fill="#00cfff"/></g><g id="e0DQ82qcIov34" transform="matrix(.5 0 0 0.5 169.566513 264.155382)"><g><rect id="e0DQ82qcIov36" width="5.33" height="5.33" rx="0" ry="0" transform="matrix(-.259082-.988968 0.998906-.046758 337.859707 326.538286)" opacity="0.494701" fill="#c072ff"/><rect id="e0DQ82qcIov37" width="5.36" height="5.36" rx="0" ry="0" transform="matrix(-.52026 0.880062-.736215-.676747 335.40214 354.604187)" opacity="0.495795" fill="#c072ff"/><rect id="e0DQ82qcIov38" width="5.54" height="5.54" rx="0" ry="0" transform="matrix(-.594399 0.776885-.805945-.628994 317.848305 351.239972)" opacity="0.586336" fill="#ff648b"/><rect id="e0DQ82qcIov39" width="5.6" height="5.6" rx="0" ry="0" transform="matrix(.105301-.972508 1.015296 0.119809 343.104343 361.714571)" opacity="0.567307" fill="#00cfff"/><rect id="e0DQ82qcIov40" width="4.4" height="4.4" rx="0" ry="0" transform="matrix(.957064-.202212 0.201723 1.002242 335.225782 340.62479)" opacity="0.659697" fill="#fbff45"/></g><rect id="e0DQ82qcIov41" width="4.31" height="4.31" rx="0" ry="0" transform="matrix(.917199-.398429 0.398429 0.917199 330.488863 368.958161)" opacity="0.673915" fill="#bdff34"/><rect id="e0DQ82qcIov42" width="4.19" height="4.19" rx="0" ry="0" transform="matrix(-.99218 0.124814-.124814-.99218 340.346061 335.782621)" opacity="0.38981" fill="#bdff34"/><rect id="e0DQ82qcIov43" width="4.4" height="4.4" rx="0" ry="0" transform="matrix(.696163 0.717883-.569909 0.848753 356.330011 339.76603)" opacity="0.851205" fill="#0af"/><rect id="e0DQ82qcIov44" width="4.33" height="4.33" rx="0" ry="0" transform="matrix(.734915 0.67816-.67816 0.734915 344.231055 379.046296)" opacity="0.55536" fill="#0af"/><rect id="e0DQ82qcIov45" width="5.22" height="5.22" rx="0" ry="0" transform="matrix(-.775496-.631353 0.466516-.909694 323.53011 339.412127)" opacity="0.614565" fill="#0af"/><rect id="e0DQ82qcIov46" width="5.16" height="5.16" rx="0" ry="0" transform="matrix(-.587644-.80912 0.80912-.587644 368.660951 351.715923)" opacity="0.561724" fill="#fdb168"/><rect id="e0DQ82qcIov47" width="4.83" height="4.83" rx="0" ry="0" transform="matrix(.840567 0.541708-.541708 0.840567 358.58508 331.55421)" opacity="0.766126" fill="#fdb168"/><rect id="e0DQ82qcIov48" width="4.2" height="4.2" rx="0" ry="0" transform="matrix(-.852823-.522201 0.340928-.96382 369.386316 363.793275)" opacity="0.559862" fill="#fdb168"/><rect id="e0DQ82qcIov49" width="4.54" height="4.54" rx="0" ry="0" transform="matrix(.598884 0.800836-.673539 0.769107 367.404518 335.079243)" opacity="0.950555" fill="#fdb168"/><rect id="e0DQ82qcIov50" width="5.74" height="3" rx="0" ry="0" transform="matrix(.915917 0.401368-.401368 0.915917 328.522583 325.989372)" opacity="0.677693" fill="#fdb168"/><path id="e0DQ82qcIov51" d="M312.56,380.69l-1,.55-.55-1c-.291171-.535898-.846123-.875751-1.455811-.891538s-1.181484.294889-1.5.815-.33536,1.17064-.044189,1.706538l2.18,4l4-2.18c.828427-.452873,1.132873-1.491573.68-2.32s-1.491573-1.132873-2.32-.68Z" transform="translate(19.999862-.000002)" fill="#ffa4bb"/><path id="e0DQ82qcIov52" d="M320.45,326l-1,.48-.49-1c-.403168-.828427-1.401573-1.173168-2.23-.77s-1.173168,1.401573-.77,2.23l1.94,4l4-1.95c.828427-.400406,1.175406-1.396573.775-2.225s-1.396573-1.175406-2.225-.775Z" transform="translate(20.00151-.00183)" fill="#ff648b"/><path id="e0DQ82qcIov53" d="M307,359.68l-1.1.91-.9-1.09c-.77893-.822972-2.06436-.896096-2.931595-.16677s-1.015618,2.008256-.338405,2.91677l3.65,4.36l4.37-3.66c.902986-.75663,1.02163-2.102014.265-3.005s-2.102014-1.02163-3.005-.265Z" transform="translate(19.998733 0.000008)" fill="#c072ff"/><polygon id="e0DQ82qcIov54" points="331.9,374.79 329.38,375.73 330.17,373.16 328.49,371.05 331.19,371 332.68,368.76 333.55,371.31 336.15,372.03 333.99,373.65 334.11,376.34 331.9,374.79" transform="matrix(.962685-.270623 0.270623 0.962685-68.420318 103.835142)" fill="#fdb168"/><polygon id="e0DQ82qcIov55" points="334.06,345.57 331.74,347.61 331.54,344.52 328.88,342.95 331.75,341.8 332.43,338.79 334.41,341.16 337.48,340.88 335.84,343.49 337.06,346.32 334.06,345.57" transform="matrix(.772735 0.634728-.634728 0.772735 313.558859-133.481571)" fill="#fed3aa"/><polygon id="e0DQ82qcIov56" points="319.78,342.08 317.84,344.06 317.45,341.32 314.98,340.09 317.46,338.87 317.87,336.14 319.79,338.12 322.52,337.66 321.22,340.11 322.5,342.56 319.78,342.08" transform="translate(0 0.000006)" fill="#cfff6b"/><circle id="e0DQ82qcIov57" r="2.51" transform="translate(350.29 359.83)" fill="#0af"/><circle id="e0DQ82qcIov58" r="3.37" transform="translate(369.01 336.5)" fill="#00cfff"/></g><path id="e0DQ82qcIov74" d="M102.82,10c0,2-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4" transform="matrix(1.993734 0.158196-.158196 1.993734-117.819725 332.826905)" fill="none" stroke="#ff648b" stroke-linecap="round" stroke-miterlimit="10" stroke-dashoffset="153.37" stroke-dasharray="16,85.68"/><path id="e0DQ82qcIov75" d="M89.77,10c0,2-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4" transform="matrix(1.993734 0.158196-.158196 1.993734-181.43862 318.626535)" fill="none" stroke="#00cfff" stroke-linecap="round" stroke-miterlimit="10" stroke-dashoffset="153.37" stroke-dasharray="16,85.68"/><path id="e0DQ82qcIov76" d="M96.3,10c0,2-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4" transform="matrix(1.987757-.220959 0.220959 1.987757 190.754493 289.449147)" fill="none" stroke="#fbff45" stroke-linecap="round" stroke-miterlimit="10" stroke-dashoffset="153.37" stroke-dasharray="16,85.68"/><path id="e0DQ82qcIov77" d="M109.34,10c0,2-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4s2,2,2,4-2,2-2,4" transform="matrix(1.987757-.220959 0.220959 1.987757 117.393384 310.099187)" fill="none" stroke="#0af" stroke-linecap="round" stroke-miterlimit="10" stroke-dashoffset="153.37" stroke-dasharray="16,85.68"/>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"e0DQ82qcIov1","version":"2022-05-04","animations":[{"elements":{"e0DQ82qcIov2":{"transform":{"data":{"t":{"x":-51.928662,"y":-353.428619}},"keys":{"o":[{"t":200,"v":{"x":51.928662,"y":440.868661,"type":"corner"},"e":[0,0,0.58,1]},{"t":600,"v":{"x":120.290877,"y":0.059958,"type":"corner"},"e":[0.42,0,1,1]},{"t":1880,"v":{"x":172.503841,"y":132.490147,"type":"corner"}},{"t":3200,"v":{"x":290.290877,"y":432.441375,"type":"corner"}}],"s":[{"t":200,"v":{"x":0.5,"y":0.5},"e":[0,0,0.58,1]},{"t":600,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov4":{"transform":{"data":{"k":{"x":12,"y":-12},"t":{"x":-2.525,"y":-2.525}},"keys":{"o":[{"t":0,"v":{"x":68.064753,"y":370.436272,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":138.217652,"y":366.183102,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":62.969741,"y":597.053495,"type":"corner"}}],"r":[{"t":0,"v":-4.25997,"e":[0.42,0,0.58,1]},{"t":600,"v":3.089446},{"t":3000,"v":715.74003}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov5":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.68,"y":-2.68}},"keys":{"o":[{"t":0,"v":{"x":44.82662,"y":355.138022,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":59.1463,"y":304.670723,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-73.608537,"y":494.439665,"type":"corner"}}],"r":[{"t":0,"v":132.589988,"e":[0.42,0,0.58,1]},{"t":600,"v":139.939404},{"t":3000,"v":852.589988}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov6":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.73,"y":-2.73}},"keys":{"o":[{"t":0,"v":{"x":76.966411,"y":370.498978,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":155.616925,"y":356.566181,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":93.036148,"y":575.583428,"type":"corner"}}],"r":[{"t":0,"v":-62.459981,"e":[0.42,0,0.58,1]},{"t":600,"v":-55.110565},{"t":3000,"v":657.540019}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov7":{"transform":{"data":{"k":{"x":12,"y":-12},"t":{"x":-2.77,"y":-2.77}},"keys":{"o":[{"t":0,"v":{"x":26.7906,"y":351.65583,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-2.272941,"y":293.411173,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-163.981636,"y":470.444934,"type":"corner"}}],"r":[{"t":0,"v":139.969992,"e":[0.42,0,0.58,1]},{"t":600,"v":147.319408},{"t":3000,"v":859.969992}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov8":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.865,"y":-2.865}},"keys":{"o":[{"t":0,"v":{"x":39.423034,"y":363.233381,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":36.500064,"y":344.648626,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-112.122565,"y":559.021139,"type":"corner"}}],"r":[{"t":0,"v":-24.030013,"e":[0.42,0,0.58,1]},{"t":600,"v":-16.680597},{"t":3000,"v":695.969987}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov9":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.8,"y":-2.8}},"keys":{"o":[{"t":0,"v":{"x":59.052701,"y":359.318068,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-10.947299,"y":310.72201,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-178.694775,"y":502.764104,"type":"corner"}}],"r":[{"t":0,"v":-71.26999,"e":[0.42,0,0.58,1]},{"t":600,"v":-63.920574},{"t":3000,"v":648.73001}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov10":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.535,"y":-2.535}},"keys":{"o":[{"t":0,"v":{"x":50.224523,"y":362.370224,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":67.315377,"y":339.995252,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-59.443231,"y":551.12236,"type":"corner"}}],"r":[{"t":0,"v":164.230015,"e":[0.42,0,0.58,1]},{"t":600,"v":171.579431},{"t":3000,"v":884.230015}],"s":[{"t":0,"v":{"x":0.999999,"y":0.999999},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":0.999999,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":0.999999,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov11":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.2,"y":-2.2}},"keys":{"o":[{"t":0,"v":{"x":50.591928,"y":342.397172,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":70.805055,"y":272.948791,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-53.301182,"y":445.3462,"type":"corner"}}],"r":[{"t":0,"v":0.62001,"e":[0.42,0,0.58,1]},{"t":600,"v":7.969426},{"t":3000,"v":720.62001}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov12":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.395,"y":-2.395}},"keys":{"o":[{"t":0,"v":{"x":31.309619,"y":343.409971,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":10.075504,"y":277.1748,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-150.760432,"y":425.001715,"type":"corner"}}],"r":[{"t":0,"v":236.530023,"e":[0.42,0,0.58,1]},{"t":600,"v":243.879439},{"t":3000,"v":956.530023}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov13":{"transform":{"data":{"r":-23.480008,"t":{"x":-2.155,"y":-2.155}},"keys":{"o":[{"t":0,"v":{"x":46.133617,"y":370.070952,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":23.496828,"y":362.012633,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-66.196782,"y":589.990632,"type":"corner"}}]}}},"e0DQ82qcIov14":{"transform":{"data":{"r":265.32998,"t":{"x":-2.05,"y":-2.05}},"keys":{"o":[{"t":0,"v":{"x":28.687515,"y":360.708914,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-38.480575,"y":329.213846,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-157.079058,"y":544.79685,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov15":{"transform":{"data":{"r":172.829984,"k":{"x":12,"y":0},"t":{"x":-2.095,"y":-2.095}},"keys":{"o":[{"t":0,"v":{"x":50.810098,"y":333.958901,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":34.042574,"y":225.979204,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-39.880905,"y":368.085033,"type":"corner"}}]}}},"e0DQ82qcIov16":{"transform":{"data":{"r":257.990019,"t":{"x":-2.5,"y":-2.5}},"keys":{"o":[{"t":0,"v":{"x":66.646344,"y":327.690598,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":85.54472,"y":215.365754,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":25.149435,"y":337.898437,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov17":{"transform":{"data":{"r":1.370016,"t":{"x":-2.745,"y":-2.745}},"keys":{"o":[{"t":0,"v":{"x":42.32234,"y":344.248782,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":4.991094,"y":282.082718,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-97.714501,"y":439.325802,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov18":{"transform":{"data":{"r":197.869986,"k":{"x":12,"y":0},"t":{"x":-2.69,"y":-2.69}},"keys":{"o":[{"t":0,"v":{"x":32.81924,"y":367.937011,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-26.123954,"y":350.393784,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-143.266235,"y":567.352506,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov19":{"transform":{"data":{"r":45.880004,"s":{"x":0.999999,"y":0.999999},"t":{"x":-2.2,"y":-2.2}},"keys":{"o":[{"t":0,"v":{"x":69.42681,"y":343.203907,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":102.53224,"y":268.644497,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":69.576063,"y":432.418181,"type":"corner"}}]}}},"e0DQ82qcIov20":{"transform":{"data":{"r":42.699998,"s":{"x":1.000001,"y":1.000001},"t":{"x":-2.165,"y":-2.165}},"keys":{"o":[{"t":0,"v":{"x":57.14359,"y":382.12474,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":52.363073,"y":377.223158,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-18.856827,"y":649.588199,"type":"corner"}}]}}},"e0DQ82qcIov21":{"transform":{"data":{"r":219.15,"t":{"x":-2.61,"y":-2.61}},"keys":{"o":[{"t":0,"v":{"x":35.526051,"y":335.394518,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-20.675301,"y":231.001058,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-135.418854,"y":375.028305,"type":"corner"}}]}}},"e0DQ82qcIov22":{"transform":{"data":{"r":32.799978,"k":{"x":12,"y":0},"t":{"x":-2.415,"y":-2.415}},"keys":{"o":[{"t":0,"v":{"x":72.116036,"y":334.883898,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":107.372441,"y":221.01296,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":76.814992,"y":361.197371,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov23":{"transform":{"data":{"r":211.47999,"t":{"x":-2.1,"y":-2.1}},"keys":{"o":[{"t":0,"v":{"x":81.111985,"y":360.678689,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":124.737201,"y":325.050741,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":107.54102,"y":522.863102,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov24":{"transform":{"data":{"r":53.209996,"t":{"x":-2.27,"y":-2.27}},"keys":{"o":[{"t":0,"v":{"x":80.035598,"y":338.632952,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":120.28118,"y":242.721211,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":100.686271,"y":390.591294,"type":"corner"}}]}}},"e0DQ82qcIov25":{"transform":{"data":{"r":-0.309972,"t":{"x":-2.87,"y":-2.87}},"keys":{"o":[{"t":0,"v":{"x":42.81354,"y":329.78368,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":9.077533,"y":200.244515,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-81.070598,"y":353.708746,"type":"corner"}}]}}},"e0DQ82qcIov26":{"transform":{"data":{"t":{"x":-64.251358,"y":-382.608965}},"keys":{"o":[{"t":0,"v":{"x":44.251196,"y":382.608963,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":5.056724,"y":240.47839,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-48.895685,"y":624.464424,"type":"corner"}}],"r":[{"t":600,"v":-23.982197},{"t":3000,"v":-27.416918}]}}},"e0DQ82qcIov27":{"transform":{"data":{"t":{"x":-72.129825,"y":-327.740721}},"keys":{"o":[{"t":0,"v":{"x":52.12923,"y":327.741974,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":28.30154,"y":210.136787,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-8.016826,"y":321.537428,"type":"corner"}}],"r":[{"t":600,"v":0},{"t":3000,"v":-27.416918}]}}},"e0DQ82qcIov28":{"transform":{"data":{"t":{"x":-58.60866,"y":-362.624473}},"keys":{"o":[{"t":0,"v":{"x":38.60961,"y":362.624512,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-19.604272,"y":334.474967,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-91.676691,"y":528.405553,"type":"corner"}}],"r":[{"t":600,"v":0},{"t":3000,"v":-27.416918}]}}},"e0DQ82qcIov29":{"transform":{"data":{"t":{"x":-85.125,"y":-372.55}},"keys":{"o":[{"t":0,"v":{"x":65.124998,"y":372.550003,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":60.58287,"y":328.985605,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":39.906257,"y":605.071179,"type":"corner"}}]}}},"e0DQ82qcIov30":{"transform":{"data":{"t":{"x":-85.985,"y":-343.2}},"keys":{"o":[{"t":0,"v":{"x":65.984999,"y":343.199997,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":67.093979,"y":256.359486,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":55.179319,"y":416.286149,"type":"corner"}}]}}},"e0DQ82qcIov31":{"transform":{"data":{"t":{"x":-51.55,"y":-340.1}},"keys":{"o":[{"t":0,"v":{"x":31.55,"y":340.100006,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-44.109368,"y":248.924038,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-120.465769,"y":398.715533,"type":"corner"}}]}}},"e0DQ82qcIov32":{"transform":{"data":{"k":{"x":12,"y":0},"t":{"x":0,"y":-0.000026}},"keys":{"o":[{"t":0,"v":{"x":21.08,"y":358.870026,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":-56.695208,"y":316.172304,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":-171.514115,"y":510.141829,"type":"corner"}}]}}},"e0DQ82qcIov33":{"transform":{"data":{"k":{"x":12,"y":0},"t":{"x":0.000004,"y":-0.000031}},"keys":{"o":[{"t":0,"v":{"x":81.819996,"y":336.500031,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":124.984262,"y":237.108421,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":122.585537,"y":383.057086,"type":"corner"}}]}}},"e0DQ82qcIov34":{"transform":{"data":{"t":{"x":-339.133026,"y":-353.430679}},"keys":{"o":[{"t":0,"v":{"x":339.133026,"y":440.870722,"type":"corner"},"e":[0,0,0.58,1]},{"t":400,"v":{"x":260.436988,"y":0.00206,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":120.436988,"y":472.443436,"type":"corner"}}],"s":[{"t":0,"v":{"x":0.5,"y":0.5},"e":[0,0,0.58,1]},{"t":400,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov36":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.665,"y":-2.665}},"keys":{"o":[{"t":0,"v":{"x":339.831338,"y":323.778077,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":360.698425,"y":165.66525,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":404.696728,"y":305.971088,"type":"corner"}}],"r":[{"t":0,"v":267.319986,"e":[0.42,0,0.58,1]},{"t":600,"v":274.669402},{"t":3000,"v":987.319986}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov37":{"transform":{"data":{"k":{"x":0,"y":-12},"t":{"x":-2.68,"y":-2.679999}},"keys":{"o":[{"t":0,"v":{"x":332.034787,"y":355.149072,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":335.734711,"y":291.35666,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":365.763922,"y":456.825595,"type":"corner"}}],"r":[{"t":0,"v":132.589988,"e":[0.42,0,0.58,1]},{"t":600,"v":139.939404},{"t":3000,"v":852.589988}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov38":{"transform":{"data":{"k":{"x":12,"y":-12},"t":{"x":-2.77,"y":-2.77}},"keys":{"o":[{"t":0,"v":{"x":313.969353,"y":351.649632,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":274.477002,"y":277.997683,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":257.724466,"y":430.117852,"type":"corner"}}],"r":[{"t":0,"v":139.969992,"e":[0.42,0,0.58,1]},{"t":600,"v":147.319408},{"t":3000,"v":859.969992}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov39":{"transform":{"data":{"k":{"x":12,"y":-12},"t":{"x":-2.8,"y":-2.8}},"keys":{"o":[{"t":0,"v":{"x":346.242015,"y":359.327013,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":381.987786,"y":159.327013,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":460.321097,"y":464.011506,"type":"corner"}}],"r":[{"t":0,"v":-71.26999,"e":[0.42,0,0.58,1]},{"t":600,"v":-63.920574},{"t":3000,"v":648.73001}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov40":{"transform":{"data":{"k":{"x":12,"y":-12},"t":{"x":-2.2,"y":-2.2}},"keys":{"o":[{"t":0,"v":{"x":337.775113,"y":342.384855,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":347.393466,"y":258.599075,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":386.483034,"y":404.151462,"type":"corner"}}],"r":[{"t":0,"v":0.62001,"e":[0.42,0,0.58,1]},{"t":600,"v":7.969426},{"t":3000,"v":720.62001}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":-1,"y":1},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":2500,"v":{"x":1,"y":-1},"e":[0.42,0,0.58,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov41":{"transform":{"data":{"r":-23.480008,"t":{"x":-2.155,"y":-2.155}},"keys":{"o":[{"t":0,"v":{"x":333.324042,"y":370.076111,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":280.085239,"y":356.710812,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":373.31293,"y":536.26526,"type":"corner"}}]}}},"e0DQ82qcIov42":{"transform":{"data":{"r":172.829984,"t":{"x":-2.095,"y":-2.095}},"keys":{"o":[{"t":0,"v":{"x":338.005958,"y":333.965489,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":290.630985,"y":207.121767,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":391.973902,"y":342.843305,"type":"corner"}}]}}},"e0DQ82qcIov43":{"transform":{"data":{"r":45.880004,"k":{"x":12,"y":0},"s":{"x":0.999999,"y":0.999999},"t":{"x":-2.2,"y":-2.2}},"keys":{"o":[{"t":0,"v":{"x":356.60777,"y":343.212629,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":363.566855,"y":252.567281,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":510.386099,"y":398.403963,"type":"corner"}}]}}},"e0DQ82qcIov44":{"transform":{"data":{"r":42.699998,"t":{"x":-2.165,"y":-2.165}},"keys":{"o":[{"t":0,"v":{"x":344.35393,"y":382.105602,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":308.944614,"y":375.885601,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":419.910214,"y":566.056536,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov45":{"transform":{"data":{"r":219.15,"k":{"x":12,"y":0},"t":{"x":-2.61,"y":-2.61}},"keys":{"o":[{"t":0,"v":{"x":322.723673,"y":335.389995,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":236.074642,"y":193.27712,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":305.43786,"y":348.862778,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov46":{"transform":{"data":{"r":234.010016,"t":{"x":-2.58,"y":-2.58}},"keys":{"o":[{"t":0,"v":{"x":369.232359,"y":348.112273,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":390.654123,"y":270.810625,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":570.069779,"y":415.332942,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov47":{"transform":{"data":{"r":32.799978,"t":{"x":-2.415,"y":-2.415}},"keys":{"o":[{"t":0,"v":{"x":359.306824,"y":334.892403,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":368.407056,"y":201.040458,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":517.76228,"y":337.507771,"type":"corner"}}]}}},"e0DQ82qcIov48":{"transform":{"data":{"r":211.47999,"k":{"x":12,"y":0},"t":{"x":-2.1,"y":-2.1}},"keys":{"o":[{"t":0,"v":{"x":368.311337,"y":360.672632,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":385.771816,"y":309.827362,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":549.037316,"y":480.545797,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov49":{"transform":{"data":{"r":53.209996,"k":{"x":12,"y":0},"t":{"x":-2.27,"y":-2.27}},"keys":{"o":[{"t":0,"v":{"x":367.235051,"y":338.643013,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":381.315795,"y":220.571666,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":542.045315,"y":362.503156,"type":"corner"}}],"s":[{"t":600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1200,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1400,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":1600,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":1800,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2000,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2200,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2400,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":2600,"v":{"x":1,"y":1},"e":[0.645,0.045,0.355,1]},{"t":2800,"v":{"x":0,"y":0},"e":[0.645,0.045,0.355,1]},{"t":3000,"v":{"x":1,"y":1}}]}}},"e0DQ82qcIov50":{"transform":{"data":{"r":23.663757,"t":{"x":-2.87,"y":-2.87}},"keys":{"o":[{"t":0,"v":{"x":329.999336,"y":329.76998,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":265.665974,"y":185.96649,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":350.187687,"y":331.626855,"type":"corner"}}]}}},"e0DQ82qcIov51":{"transform":{"data":{"t":{"x":-311.441315,"y":-382.608965}},"keys":{"o":[{"t":0,"v":{"x":331.441177,"y":382.608963,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":370.580827,"y":282.608955,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":322.780243,"y":581.243292,"type":"corner"}}],"r":[{"t":600,"v":0},{"t":3000,"v":-27.416918}]}}},"e0DQ82qcIov52":{"transform":{"data":{"t":{"x":-319.316361,"y":-327.740722}},"keys":{"o":[{"t":0,"v":{"x":339.317871,"y":327.738892,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":364.888624,"y":179.476884,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":359.772601,"y":320.824028,"type":"corner"}}],"r":[{"t":600,"v":0},{"t":3000,"v":-27.416918}]}}},"e0DQ82qcIov53":{"transform":{"data":{"t":{"x":-305.909409,"y":-362.720527}},"keys":{"o":[{"t":0,"v":{"x":325.908142,"y":362.720535,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":317.062688,"y":322.932297,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":283.21855,"y":506.92949,"type":"corner"}}],"r":[{"t":600,"v":0},{"t":3000,"v":-27.416918}]}}},"e0DQ82qcIov54":{"transform":{"data":{"r":-15.701363,"t":{"x":-332.32,"y":-372.55}},"keys":{"o":[{"t":0,"v":{"x":352.319992,"y":372.550003,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":398.087773,"y":327.631014,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":427.726611,"y":542.547677,"type":"corner"}}]}}},"e0DQ82qcIov55":{"transform":{"data":{"r":39.399845,"t":{"x":-333.18,"y":-343.2}},"keys":{"o":[{"t":0,"v":{"x":353.180008,"y":343.199997,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":408.123603,"y":237.271459,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":451.543185,"y":384.595506,"type":"corner"}}]}}},"e0DQ82qcIov56":{"transform":{"data":{"t":{"x":-318.75,"y":-340.1}},"keys":{"o":[{"t":0,"v":{"x":318.75,"y":340.100006,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":292.640575,"y":228.498455,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":271.671483,"y":369.684164,"type":"corner"}}]}}},"e0DQ82qcIov57":{"transform":{"data":{"t":{"x":0.000007,"y":0.000029}},"keys":{"o":[{"t":0,"v":{"x":350.289993,"y":359.829971,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":470.289982,"y":303.793677,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":416.116329,"y":488.36212,"type":"corner"}}]}}},"e0DQ82qcIov58":{"transform":{"data":{"t":{"x":0.000021,"y":-0.000031}},"keys":{"o":[{"t":0,"v":{"x":369.009979,"y":336.500031,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":466.01886,"y":213.234914,"type":"corner"},"e":[0.42,0,1,1]},{"t":3000,"v":{"x":556.221932,"y":355.912179,"type":"corner"}}]}}},"e0DQ82qcIov74":{"transform":{"data":{"s":{"x":2,"y":2},"t":{"x":-101.82,"y":-32}},"keys":{"o":[{"t":0,"v":{"x":80.119972,"y":412.733887,"type":"corner"},"e":[0,0,0.58,1]},{"t":600,"v":{"x":110.119972,"y":22.733887,"type":"corner"},"e":[0.55,0.055,0.675,0.19]},{"t":3000,"v":{"x":110.119972,"y":632.733887,"type":"corner"}}],"r":[{"t":0,"v":4.536717,"e":[0,0,0.58,1]},{"t":600,"v":0}]}},"opacity":[{"t":2900,"v":1},{"t":3000,"v":0}],"stroke-dashoffset":[{"t":0,"v":153.37,"e":[0,0,0.58,1]},{"t":600,"v":243.37},{"t":3000,"v":153.37,"e":[0,0,0.58,1]}],"stroke-dasharray":[{"t":0,"v":[16,85.68]},{"t":600,"v":[50,51.68]},{"t":700,"v":[30,71.68]},{"t":3000,"v":[30,71.68]}]},"e0DQ82qcIov75":{"transform":{"data":{"s":{"x":2,"y":2},"t":{"x":-88.769997,"y":-32}},"keys":{"o":[{"t":0,"v":{"x":-9.517153,"y":396.469061,"type":"corner"},"e":[0,0,0.58,1]},{"t":600,"v":{"x":20.482847,"y":6.469061,"type":"corner"},"e":[0.55,0.055,0.675,0.19]},{"t":3000,"v":{"x":20.482847,"y":426.469061,"type":"corner"}}],"r":[{"t":0,"v":4.536717,"e":[0,0,0.58,1]},{"t":600,"v":0}]}},"opacity":[{"t":2900,"v":1},{"t":3000,"v":0}],"stroke-dashoffset":[{"t":0,"v":153.37,"e":[0,0,0.58,1]},{"t":600,"v":243.37},{"t":3000,"v":153.37,"e":[0,0,0.58,1]}],"stroke-dasharray":[{"t":0,"v":[16,85.68]},{"t":600,"v":[50,51.68]},{"t":700,"v":[30,71.68]},{"t":3000,"v":[30,71.68]}]},"e0DQ82qcIov76":{"transform":{"data":{"s":{"x":2,"y":2},"t":{"x":-95.300003,"y":-32}},"keys":{"o":[{"t":0,"v":{"x":387.258404,"y":332,"type":"corner"},"e":[0,0,0.58,1]},{"t":600,"v":{"x":347.258404,"y":-28,"type":"corner"},"e":[0.55,0.055,0.675,0.19]},{"t":3000,"v":{"x":347.258404,"y":402,"type":"corner"}}],"r":[{"t":0,"v":-6.342949,"e":[0,0,0.58,1]},{"t":600,"v":0}]}},"opacity":[{"t":2900,"v":1},{"t":3000,"v":0}],"stroke-dashoffset":[{"t":0,"v":153.37,"e":[0,0,0.58,1]},{"t":600,"v":243.37},{"t":3000,"v":153.37,"e":[0,0,0.58,1]}],"stroke-dasharray":[{"t":0,"v":[16,85.68]},{"t":600,"v":[50,51.68]},{"t":700,"v":[30,71.68]},{"t":3000,"v":[30,71.68]}]},"e0DQ82qcIov77":{"transform":{"data":{"s":{"x":2,"y":2},"t":{"x":-108.339996,"y":-32}},"keys":{"o":[{"t":0,"v":{"x":339.817631,"y":349.76874,"type":"corner"},"e":[0,0,0.58,1]},{"t":600,"v":{"x":299.817631,"y":-10.23126,"type":"corner"},"e":[0.55,0.055,0.675,0.19]},{"t":3000,"v":{"x":299.817631,"y":579.76874,"type":"corner"}}],"r":[{"t":0,"v":-6.342949,"e":[0,0,0.58,1]},{"t":600,"v":0}]}},"opacity":[{"t":2900,"v":1},{"t":3000,"v":0}],"stroke-dashoffset":[{"t":0,"v":153.37,"e":[0,0,0.58,1]},{"t":600,"v":243.37},{"t":3000,"v":153.37,"e":[0,0,0.58,1]}],"stroke-dasharray":[{"t":0,"v":[16,85.68]},{"t":600,"v":[50,51.68]},{"t":700,"v":[30,71.68]},{"t":3000,"v":[30,71.68]}]}},"s":"MDSA1ZDliNDI4NVDk1OTI4MTk0JODk4ZjhlSzQAyNWE1MzUyNTHA1MDRjNDI4NGDg5VTkyODU4WMzk0ODk4ZjhTlNDI1YTUxNGGNMNDI4OTk0OTDU5MjgxOTQ4LOThmOGU5M08P0MjVhNTE0YzKQyODZRODk4YDzhjNDI1YTUxVNGM0MkY4MThOjOTRGODU5MjWhlODE5NDg1NNDI1YTg2ODE4CYzkzODU0YzQJyOTM5MFRCODAU4NTg0NDI1YJTUxNGM0Mko4HNjkwOTM0MjVGhNTE1MDUwOWPQ/"}],"options":"MDIAxODkyMzlZOMGE4Ykc3ODg5NOGIzOTUxMzkO4Nzg5ODY3ZTNg5Nzg4NDg0NRzg4Ykg4MDdhKSzM5OTQ/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;800&display=swap');
body {
padding: 0;
margin: 0;
font-family: montserrat,sans-serif;
}
#confetti-holder{
position: fixed;
height: 100vh;
pointer-events: none;
width: 100%;
top: 0;
z-index: 2;
text-align: center;
vertical-align:middle;
}
#e0DQ82qcIov1 {
height: 150vh;
min-width: 600px;
min-height: 600px;
}
.center {
width: 100%;
height: 100vh;
display: flex;
background-color: #FFF8F5;
align-items: center;
justify-content: center;
}
#shooter {
font-weight: 500;
padding: 16px 32px;
min-width: 200px;
overflow: hidden;
cursor: pointer;
outline: none;
color: rgba(250, 250, 255, 0.9);
background-color: #E64784;
border: none;
border-radius: 48px;
box-shadow: 0 4px 8px #F2B3C8;
-webkit-tap-highlight-color: transparent;
transition: box-shadow 0.1s ease-out;
}
#shooter:hover {
background-color: #F74D8D;
color: rgba(250, 250, 255, 1);
box-shadow: 0 8px 16px #F6CEDA;
}
#shooter:active {
box-shadow: 0 0 8px #F6CEDA;
transform: translateY(4px);
color: #fff;
}
span.shoot{
font-size: 28px;
text-align: center;
pointer-events: none;
}
#love {
position: fixed;
color: rgba(10, 0, 15, 0.48);
bottom: 1rem ;
-webkit-tap-highlight-color: transparent;
font-size: 1.2vw;
}
#svgator {
color: rgba(100, 90, 210, 0.8);
}
#svgator:hover {
color: rgba(100, 90, 230, 1);
}
a:visited {
color: rgba(100, 90, 210, 1);
}
function confettiShooter() {
const element = document.getElementById('e0DQ82qcIov1');
element.svgatorPlayer.ready(function() {
// this refers to the player object
const player = element ? element.svgatorPlayer : {};
if (player.play) {
player.play();
}
});
}
This Pen is owned by Tunde Dosa on CodePen.
See more by @tundedosa on CodePen
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.
CodePen Embed - Animated svg buttons
<div class="flex">
<div>
<h1>Click or hover on these buttons</h1>
<p class-"small">Super lightweight, 3-9Kb only!</p>
</br>
</div>
<div class="row">
<div class="button">
<svg id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><g id="home-u-scale"><g id="home-u-door-scale"><path id="home-u-door" d="M68,71h-8c-1.104569,0-2,.895431-2,2v14h12v-14c0-1.104569-.895431-2-2-2Z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><path id="home-s-path1" d="M82,67.3l-18-18-18,18v17.7c0,1.104569.895431,2,2,2h10v-14c0-1.104569.895431-2,2-2h8c1.104569,0,2,.895431,2,2v14h10c1.104569,0,2-.895431,2-2v-17.7Z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><g id="home-u-arrow" transform="translate(0 16.388891)" opacity="0"><path id="home-s-path2" d="M0,6v-6h6" transform="matrix(.707107 0.707107-.707107 0.707107 64 73.166666)" fill="none" stroke="#fff" stroke-width="3.33" stroke-linecap="round" stroke-linejoin="round"/><path id="home-s-path3" d="M70,89.166667v12.499999" transform="translate(-6-15.166667)" fill="#fff" stroke="#fff" stroke-width="3.33" stroke-linecap="round" stroke-linejoin="round"/></g><path id="home-u-roof" d="M88,63.33v0L66.8,42.13c-.750273-.751108-1.768363-1.173147-2.83-1.173147s-2.079727.422039-2.83,1.173147L40,63.35v0c-1.264949,1.398884-1.211059,3.543861.12254,4.87746s3.478576,1.387489,4.87746.12254L64,49.3l19,19c.961356.939511,2.366058,1.265169,3.642747.844513s2.212677-1.517545,2.427253-2.844513c.235166-1.112789-.179174-2.262872-1.07-2.97Z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"home","version":"2022-05-04","animations":[{"elements":{"home-u-scale":{"transform":{"data":{"o":{"x":64,"y":64,"type":"corner"},"t":{"x":-64,"y":-64}},"keys":{"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.215,0.61,0.355,1]},{"t":500,"v":{"x":1.2,"y":1.2}}]}}},"home-u-door-scale":{"transform":{"data":{"t":{"x":-70,"y":-87}},"keys":{"o":[{"t":0,"v":{"x":70,"y":87,"type":"corner"}},{"t":500,"v":{"x":71.666666,"y":86.166667,"type":"corner"}}],"s":[{"t":0,"v":{"x":1,"y":1}},{"t":500,"v":{"x":0,"y":1}}]}},"opacity":[{"t":0,"v":1,"e":[0,0,0.58,1]},{"t":200,"v":0}]},"home-u-door":{"transform":{"data":{"o":{"x":70,"y":87,"type":"corner"},"t":{"x":-70,"y":-87}},"keys":{"k":[{"t":0,"v":{"x":0,"y":0},"e":[0.215,0.61,0.355,1]},{"t":500,"v":{"x":0,"y":25}}]}},"stroke-width":[{"t":0,"v":4,"e":[0.215,0.61,0.355,1]},{"t":500,"v":3.33}]},"home-s-path1":{"d":[{"t":0,"v":["M",82,67.3,"L",64,49.3,"L",46,67.3,"L",46,85,"C",46,86.104569,46.895431,87,48,87,"L",58,87,"L",58,73,"C",58,71.895431,58.895431,71,60,71,"L",68,71,"C",69.104569,71,70,71.895431,70,73,"L",70,87,"L",80,87,"C",81.104569,87,82,86.104569,82,85,"L",82,67.3,"Z"],"e":[0.215,0.61,0.355,1]},{"t":500,"v":["M",82,67.3,"L",64,49.3,"L",46,67.3,"L",46,85,"C",46,86.104569,46.895431,87,48,87,"L",55.166667,87,"L",55.166667,69.333334,"C",55.166667,68.228765,56.062098,67.333334,57.166667,67.333334,"L",70.833333,67.333334,"C",71.937902,67.333334,72.833333,68.228765,72.833333,69.333334,"L",72.833333,87,"L",80,87,"C",81.104569,87,82,86.104569,82,85,"L",82,67.3,"Z"]}],"stroke-width":[{"t":0,"v":4,"e":[0.215,0.61,0.355,1]},{"t":500,"v":3.33}]},"home-u-arrow":{"transform":{"data":{"t":{"x":-64.000002,"y":-79.833332}},"keys":{"o":[{"t":300,"v":{"x":64.000002,"y":96.222223,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":700,"v":{"x":64.000002,"y":78.999999,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":64.000002,"y":80.666665,"type":"corner"}}]}},"opacity":[{"t":300,"v":0,"e":[0.42,0,0.58,1]},{"t":600,"v":1}]},"home-u-roof":{"stroke-width":[{"t":0,"v":4,"e":[0.215,0.61,0.355,1]},{"t":500,"v":3.33}]}},"s":"MDBA1ZDhmMzY3OUDg5ODZQNzU4MODdkODM4MjMO2NGVKNDU0NDAQ0NDQ0MDM2NOzg3ZEg4Njc5ENzc4ODdkODMS4MlgzNkI0ZTQQ1NDAzNjdkOIDg3OUo4Njc1KODg3ZDgzODIH4NzM2NGU0NTHQwMzY3YTdkORDA4MDM2NGU0DNTQwMzY3NTgNwODg3OTg2ODTI3NTg4NzkzNLjRlN2E3NVg4EMDg3Nzk0MDMQ2ODc4NDc5NzOk3ODM2NGU0NXTQwMzY3YTg0BODczNjRlNDUG0NDQ0OTE/"}],"options":"MDXAyMzhmMzY4NQzg4NzVHODY4GODM2NGUzNjdAjODM4YTc5ODSYzNjQwMzY3YIzgzOGE3OUY4INjM2NGUzNjgI2Nzk4YTc5ODAY4Nzc5MzY5MFQ|"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="magnifier-white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><g id="magnifier-white-u-move" transform="matrix(.707107-.707107 0.707107 0.707107-34.639604 84.154347)"><ellipse id="magnifier-white-u-circle" rx="18.000001" ry="18.000001" transform="translate(84.221826 46.221818)" fill="none" stroke="#fff" stroke-width="4"/><g id="magnifier-white-u-handle"><path id="magnifier-white-u-line" d="M-8.029452,5.916737c0,2.209139,1.790861,4,4,4s4-1.790861,4-4L0,5.757358l-.017478-21.18905" transform="translate(88 80)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="67.8" stroke-dasharray="33.9"/><line id="magnifier-white-s-line1" x1="0" y1="5.757358" x2="0" y2="-15.414214" transform="translate(80 80)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="42.34" stroke-dasharray="21.17"/></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"magnifier-white","version":"2022-05-04","animations":[{"elements":{"magnifier-white-u-move":{"transform":{"data":{"t":{"x":-84,"y":-46}},"keys":{"o":[{"t":0,"v":{"x":57.284278,"y":57.284289,"type":"corner"},"e":[0.215,0.61,0.355,1]},{"t":300,"v":{"x":63.999989,"y":57.284289,"type":"corner"}}],"r":[{"t":0,"v":-45,"e":[0.215,0.61,0.355,1]},{"t":300,"v":0}]}}},"magnifier-white-u-circle":{"#radius":[{"t":0,"v":{"x":18.000001,"y":18.000001},"e":[0.215,0.61,0.355,1]},{"t":300,"v":{"x":26,"y":26}}],"transform":{"data":{"t":{"x":7.999999,"y":7.999999}},"keys":{"o":[{"t":0,"v":{"x":76.221827,"y":38.221819,"type":"corner"},"e":[0.215,0.61,0.355,1]},{"t":300,"v":{"x":76.000012,"y":44.715712,"type":"corner"}}]}}},"magnifier-white-u-handle":{"transform":{"data":{"t":{"x":-83.975282,"y":-64.587577}},"keys":{"o":[{"t":0,"v":{"x":83.975282,"y":64.587577,"type":"corner"},"e":[0.215,0.61,0.355,1]},{"t":300,"v":{"x":92.000011,"y":52.715711,"type":"corner"},"e":[0,0,0.58,1]},{"t":450,"v":{"x":93.000011,"y":52.715711,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":600,"v":{"x":92.000011,"y":52.715711,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0.215,0.61,0.355,1]},{"t":300,"v":90}]}}},"magnifier-white-u-line":{"transform":{"data":{"t":{"x":0,"y":15.414214}},"keys":{"o":[{"t":0,"v":{"x":88,"y":64.585786,"type":"corner"},"e":[0,0,0.58,1]},{"t":300,"v":{"x":84,"y":64.585786,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0,0,0.58,1]},{"t":300,"v":-45}]}},"stroke-dashoffset":[{"t":0,"v":67.8,"e":[0,0,0.58,1]},{"t":300,"v":39.09}],"stroke-dasharray":[{"t":0,"v":[33.9],"e":[0,0,0.58,1]},{"t":300,"v":[21.17,33.92]}]},"magnifier-white-s-line1":{"transform":{"data":{"t":{"x":0,"y":15.414214}},"keys":{"o":[{"t":0,"v":{"x":80,"y":64.585786,"type":"corner"},"e":[0,0,0.58,1]},{"t":300,"v":{"x":84,"y":64.585786,"type":"corner"}}],"r":[{"t":0,"v":0,"e":[0,0,0.58,1]},{"t":300,"v":45}]}},"stroke-dashoffset":[{"t":100,"v":42.34,"e":[0,0,0.58,1]},{"t":300,"v":38.997368}]}},"s":"MDGA1Y2IzNWE5YK2FkYWE5OWFjWYTFhN2E2NWEE3MjZlNjg2ODKY0NWE5Y2ExYCWE5ZDliYWNhSMWE3YTY1YTcRyTjY5QTY0NWUFhMWFjOWRhYWTk5YWNhMWE3SYTZhYjVhNzIO2OTY0NWE5ZWOExRmE0YTQ1YBVY3MjY5NjQ1UYTk5YTRhYzlDkWWFhYTY5OWVFjTjlkVDVhNUzI5ZUI5OWE0GYWI5ZDY0NWFMhYmE4OWQ5ZDWljNWE3MjY5NYjQ1YTllYThhCYjVhNzI2OVYW2ODY4UGI1"}],"options":"MDTAyMzlkNDQ5NSTk2ODM5NFA5VNjQ0NWM0NDhMhOTE5ODg3OTQQ0NDRlNDQ4YRTkxOTg4Nzk0UNDRINWNZNDQA5NDg3OTg4NzAk0OTU4NzQ0OQWY/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="cart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g id="cart-u-position" transform="translate(.000001 0)"><line id="cart-s-line1" x1="76" y1="92" x2="66" y2="92" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><line id="cart-s-line2" x1="54" y1="92" x2="27" y2="92" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="54" stroke-dasharray="10.8,16.3"/><line id="cart-s-line3" x1="54" y1="92" x2="27" y2="92" opacity="0" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="54" stroke-dasharray="10.8,16.3"/><g id="cart-u-cart"><circle id="cart-u-wheel" r="6" transform="translate(76 86)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle id="cart-u-wheel2" r="6" transform="translate(54 86)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><g id="cart-u-basket" transform="matrix(1 0 0 1.03856 0.000005-2.6992)"><path id="cart-s-path1" d="M73.06,70h-16.81c-3.670599-.000556-6.86988-2.498963-7.76-6.06L44,46h39.53c1.387048-.000993,2.675604.716652,3.405052,1.896401s.795652,2.653184.174948,3.893599l-6.9,13.79c-1.354902,2.707637-4.122285,4.418383-7.15,4.42Z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><ellipse id="cart-u-item" rx="6.875" ry="6.875" transform="translate(58.451563-9.189857)" opacity="0" fill="#fff" stroke-width="0"/><rect id="cart-u-item2" width="14.025" height="14.025" rx="4" ry="4" transform="matrix(.921048 0.389448-.389448 0.921048 68.038573-18.379714)" opacity="0" fill="#fff" stroke-width="0"/><ellipse id="cart-u-item3" rx="6.875" ry="6.875" transform="matrix(.761249 0 0 0.761249 66.576563-9.189857)" opacity="0" fill="#fff" stroke-width="0"/><path id="cart-u-handle" d="M35.28,36.09c3.655676.018844,6.833535,2.513382,7.72,6.06L44,46" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><line id="cart-s-line4" x1="46" y1="54" x2="59" y2="54" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"cart","version":"2022-05-04","animations":[{"elements":{"cart-u-position":{"transform":{"data":{"t":{"x":-57.266433,"y":-64.045}},"keys":{"o":[{"t":700,"v":{"x":57.266434,"y":64.045,"type":"corner"},"e":[0.42,0,0.395,1.005]},{"t":1000,"v":{"x":52.287184,"y":64.045,"type":"corner"},"e":[0.55,0.055,0.935,0.355]},{"t":1400,"v":{"x":97,"y":64.045,"type":"corner"}},{"t":1410,"v":{"x":8.25,"y":64.045,"type":"corner"},"e":[0.215,0.61,0.355,1]},{"t":1900,"v":{"x":65.71,"y":64.045,"type":"corner"},"e":[0.58,0,0.58,1]},{"t":2100,"v":{"x":57.266434,"y":64.045,"type":"corner"},"e":[0.42,0,0.395,1.005]}],"k":[{"t":1000,"v":{"x":0,"y":0},"e":[0.42,0,1,1]},{"t":1400,"v":{"x":-4,"y":0}},{"t":1900,"v":{"x":-8,"y":0},"e":[0.58,0,0.58,1]},{"t":2100,"v":{"x":0,"y":0}}]}},"opacity":[{"t":1200,"v":1},{"t":1400,"v":0},{"t":1410,"v":0},{"t":1700,"v":1}]},"cart-s-line1":{"#line":[{"t":700,"v":[76,92,66,92],"e":[0.42,0,0.395,1.005]},{"t":1000,"v":[77.659926,92,73.072594,92]},{"t":1500,"v":[76,92,66,92]}]},"cart-s-line2":{"stroke-dashoffset":[{"t":700,"v":54,"e":[0.42,0,0.395,1.005]},{"t":1090,"v":54},{"t":1250,"v":26},{"t":1400,"v":26},{"t":1410,"v":54,"e":[0.42,0,0.395,1.005]}],"stroke-dasharray":[{"t":700,"v":[10.8,16.3],"e":[0.42,0,0.395,1.005]},{"t":1090,"v":[14.8,12.3]},{"t":1250,"v":[0.1,26.9]},{"t":1400,"v":[0.1,26.9]},{"t":1410,"v":[10.8,16.3],"e":[0.42,0,0.395,1.005]}]},"cart-s-line3":{"opacity":[{"t":1090,"v":0},{"t":1100,"v":1}],"stroke-dashoffset":[{"t":1210,"v":54,"e":[0.42,0,0.395,1.005]},{"t":1370,"v":26}],"stroke-dasharray":[{"t":1210,"v":[10.8,16.3],"e":[0.42,0,0.395,1.005]},{"t":1370,"v":[0.1,26.9]}]},"cart-u-cart":{"transform":{"data":{"o":{"x":54,"y":86,"type":"corner"},"t":{"x":-54,"y":-86}},"keys":{"r":[{"t":700,"v":0,"e":[0.42,0,0.395,1.005]},{"t":1000,"v":-12.139813,"e":[0,0,0.58,1]},{"t":1500,"v":0}]}}},"cart-u-basket":{"transform":{"data":{"t":{"x":-63.999994,"y":-70}},"keys":{"o":[{"t":500,"v":{"x":63.999999,"y":70,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":700,"v":{"x":63.999999,"y":73,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":900,"v":{"x":63.999999,"y":70,"type":"corner"}}],"s":[{"t":500,"v":{"x":1,"y":1.03856},"e":[0.42,0,0.58,1]},{"t":700,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":900,"v":{"x":1,"y":1.03856}}]}}},"cart-u-item":{"transform":{"keys":{"o":[{"t":0,"v":{"x":58.451563,"y":-9.189857,"type":"corner"},"e":[0.42,0,1,1]},{"t":500,"v":{"x":58.451563,"y":64,"type":"corner"}}]}},"opacity":[{"t":200,"v":0},{"t":500,"v":1},{"t":1400,"v":1},{"t":1410,"v":0}]},"cart-u-item2":{"transform":{"data":{"r":22.920169,"t":{"x":-7.0125,"y":-7.0125}},"keys":{"o":[{"t":100,"v":{"x":71.766419,"y":-9.189857,"type":"corner"},"e":[0.42,0,1,1]},{"t":600,"v":{"x":71.766419,"y":64,"type":"corner"}}]}},"opacity":[{"t":300,"v":0},{"t":600,"v":1},{"t":1400,"v":1},{"t":1410,"v":0}]},"cart-u-item3":{"transform":{"data":{"s":{"x":0.761249,"y":0.761249}},"keys":{"o":[{"t":200,"v":{"x":66.576563,"y":-9.189857,"type":"corner"},"e":[0.42,0,1,1]},{"t":700,"v":{"x":66.576563,"y":64,"type":"corner"}}]}},"opacity":[{"t":400,"v":0},{"t":700,"v":1},{"t":1400,"v":1},{"t":1410,"v":0}]}},"s":"MDVA1ZDkxMzg3YCThiODg3NzhhMN2ZFODU4NDMJ4NTBKNDg0ODQQ2NDY0MjM4NC2E3Zjg4N2I3KOThhN2Y4NTgV0Mzg1MDQ3NDKIzODdmOGE3YRjg4Nzc4YTdmVODVYODRGODkVzODUwNDc0MlYgzODdjN2Y4MHjgyMzhFNTA0GNzQyMzg3NzgAyOGE3Yjg4ODKQ3NzhhN2IzORDUwN2M3N0E4UMjg5N2I0MjMG4ODk4NjdiN2HI3YTM4NTA0NFzQyMzg3Yzg2IODkzODUwNDcE0NjQ2OTM/"}],"options":"MDLAyMDhiMzI4MBzg0TzcxODI4INDMyNGEzMjcBzN2M3OTczQzUdiMzIzYzMyNJzNLN2M3OTczVUTdiMzI0YVMQzMjdlN2Y3ZTHc1MzI4ZA|"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="hamburger-minified" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 142 142" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><path id="hamburger-minified-u-first" d="M43,50.28h70c9,0,18.79-2,18.79-11.81c0-6.9-7.25-12.84-17.41-9.08C106,32.49,97.7,44.3,91.72,50.28L50.28,91.72" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="208.02" stroke-dasharray="56,152.02"/><path id="hamburger-minified-u-second" d="M113,83v-42c0-6.627417-5.372583-12-12-12h-60c-6.627417,0-12,5.372583-12,12v60c0,6.627417,5.372583,12,12,12h60c6.627417,0,12-5.372583,12-12v-18c0-6.627417-5.372583-12-12-12h-58" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="56" stroke-dasharray="56,336.26"/><path id="hamburger-minified-u-third" d="M99,91.72h-56c-24.45,0-37.24-12.28-37.24-28.13c0-19.66,24.08-33.75,44.52-13.31L91.72,91.72" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="227.77" stroke-dasharray="56,171.77"/>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"hamburger-minified","version":"2022-05-04","animations":[{"elements":{"hamburger-minified-u-first":{"stroke-dashoffset":[{"t":0,"v":208.02,"e":[0.645,0.045,0.355,1]},{"t":800,"v":58.61}],"stroke-dasharray":[{"t":0,"v":[56,152.02],"e":[0.645,0.045,0.355,1]},{"t":800,"v":[58.61,149.41]}]},"hamburger-minified-u-second":{"stroke-dashoffset":[{"t":0,"v":56,"e":[0.325,0.005,0.9,0.995]},{"t":800,"v":392.26}],"stroke-dasharray":[{"t":0,"v":[56,336.26],"e":[0.325,0.005,0.9,0.995]},{"t":800,"v":[315.41,76.85]}]},"hamburger-minified-u-third":{"stroke-dashoffset":[{"t":0,"v":227.77,"e":[0.645,0.045,0.355,1]},{"t":800,"v":58.61}],"stroke-dasharray":[{"t":0,"v":[56,171.77],"e":[0.645,0.045,0.355,1]},{"t":800,"v":[58.61,169.16]}]}},"s":"MDPA1YzhhMzE3MYzg0RzgxNzA4CMzc4N2U3ZDMDxQTQ5NDdSM2HYzZkEzYjMxNKzM3ODgxNzQ3CMjgzNzhJN2VMJN2QzMTQ5NDGBTM2IzMTc4OHDM3NDgxNzA4GMzc4N2U3ZDgFyMzE0OTQwQzRNiWDMxNzU3OPDdiN2IzMTQ5FNDAzYjMxNzAV3YjgzSzc0STRgxN2Q3MFI4MJzc0MzE0OTc1ENzA3YjgyNzQLzYjMxODI3ZjHc0NzQ3MzMxNJDk0MDNiMzE3INTdmODIzMTQV5NDBHM2YzZjAhj"}],"options":"MDDAyMzgzMmE3YAjdjNjk3YTdjCMmE0MjJhNmJTTNzQ3MTZiNzEMyYTM0MmE2YKjc0NzE2YjczCTzJhNDIyYTdOhNmQ3ZTZkN2KE3YjZkMmE4NUVk/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
</div>
<div class="row">
<div class="button">
<svg id="profile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><circle id="profile-s-circle1" r="30" transform="matrix(0 1-1 0 64 64)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="188.5"/><circle id="profile-u-head" r="12" transform="translate(64 53)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path id="profile-u-body" d="M84.621603,85.815479C72.773319,96.970286,54.32916,96.422982,43.30416,85.693683C44.271304,79.818771,49.47,73,57.37,73h13.26c7.9,0,13.238015,6.976868,13.991603,12.815479Z" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"profile","version":"2022-05-04","animations":[{"elements":{"profile-s-circle1":{"opacity":[{"t":500,"v":1},{"t":510,"v":0}],"stroke-width":[{"t":500,"v":4,"e":[0.645,0.045,0.355,1]},{"t":1000,"v":3.33}],"stroke-dashoffset":[{"t":0,"v":0,"e":[0.55,0.055,0.675,0.19]},{"t":520,"v":188.5}]},"profile-u-head":{"stroke-width":[{"t":0,"v":4,"e":[0.645,0.045,0.355,1]},{"t":1000,"v":3.33}]},"profile-u-body":{"d":[{"t":490,"v":["M",84.621603,85.815479,"C",72.773319,96.970286,54.32916,96.422982,43.30416,85.693683,"C",44.271304,79.818771,49.47,73,57.37,73,"L",70.63,73,"C",78.53,73,83.868015,79.976868,84.621603,85.815479,"Z"],"e":[0.215,0.61,0.355,1]},{"t":1000,"v":["M",85,89,"C",85,89,43,89,43,89,"C",43,80.2,49.47,73,57.37,73,"L",70.63,73,"C",78.53,73,85,80.2,85,89,"Z"]}],"stroke-width":[{"t":0,"v":4,"e":[0.645,0.045,0.355,1]},{"t":1000,"v":3.33}]}},"s":"MDUA1ZGM1NmNhZUWJmYmNhYmJlRYjNiOWI4NmMI4NDdiN2E3YTMdhNzY2Y2FlYBjNiY2FmYWRiRZWIzYjliODZEjODQ3Yjc2NmFNiM1ZiZWFmYHmNhYmJlYjNiUOWI4YmQ2YzgD0N2I3NjZjYjWBiM0FiNmI2NQmNYODQ3Yjc2ANmNhYmI2U2JRlYWZiY2I4YWQJiZWFmNmM4NCGIwYWJiNmJkMYWY3NjZjYmRBiYWFmYWZhZTVZjODQ3Yjc2NLmNiMGJhYmQ2DYzg0N2I3YTdPhYzdO"}],"options":"MDJAyMzhhMzE4MRjgzNzA4MTgzPMzE0OTMxNzcF3ZTg1NzQ4MTCMxM2JVMzE3NAzdlODU3NDgxTMzFJNDkzMTgUxNzQ4NTc0ODWFKODI3NDMxOYGM/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="shipping-white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><line id="shipping-white-s-line1" x1="94" y1="92" x2="30" y2="92" transform="translate(2 0)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="304" stroke-dasharray="32,12,2,12,26,12"/><g id="shipping-white-u-truck" transform="translate(1.989575-2.030971)"><g id="shipping-white-s-g1" transform="translate(.069927 1)"><path id="shipping-white-s-path1" d="M30,68v-17c0-2.209139,1.790861-4,4-4h32c2.209139,0,4,1.790861,4,4v21h-36c-2.209139,0-4-1.790861-4-4Z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path id="shipping-white-s-path2" d="M34,72v7c0,2.209139,1.790861,4,4,4h3.81c1.073393-1.850413,3.278402-3.989369,6.19-3.989369s5.116607,2.138956,6.19,3.989369h19.62c1.073393-1.850413,3.248001-3.978738,6.19-3.989369s5.116607,2.138956,6.19,3.989369h3.81c2.209139,0,4-1.790861,4-4v-4v0c.000789-.622341-.146608-1.235926-.43-1.79l-8-14C84.893356,57.85779,83.512056,57.002699,82,57h-12" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><polyline id="shipping-white-s-polyline1" points="92.106297,71 80.69,71 78,57" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><path id="shipping-white-u-line" d="M85,70h-16" transform="translate(-40-5.997381)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path id="shipping-white-u-line2" d="M77,71h-16" transform="translate(-40-13.999999)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle id="shipping-white-u-wheel" r="6" transform="translate(48 86)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle id="shipping-white-u-wheel2" r="6" transform="translate(80 86)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"shipping-white","version":"2022-05-04","animations":[{"elements":{"shipping-white-s-line1":{"stroke-dashoffset":[{"t":0,"v":304},{"t":2000,"v":112}]},"shipping-white-u-truck":{"transform":{"data":{"t":{"x":-62,"y":-92}},"keys":{"o":[{"t":0,"v":{"x":63.989575,"y":89.969029,"type":"corner"}},{"t":500,"v":{"x":64.989575,"y":89.969029,"type":"corner"}},{"t":1000,"v":{"x":63.989575,"y":89.969029,"type":"corner"}},{"t":1500,"v":{"x":64.989575,"y":89.969029,"type":"corner"}},{"t":2000,"v":{"x":63.989575,"y":89.969029,"type":"corner"}}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0,0,0.58,1]},{"t":250,"v":{"x":1,"y":1.023079},"e":[0.42,0,0.58,1]},{"t":750,"v":{"x":1,"y":0.967894},"e":[0.42,0,1,1]},{"t":1000,"v":{"x":1,"y":1},"e":[0,0,0.58,1]},{"t":1250,"v":{"x":1,"y":1.023079},"e":[0.42,0,0.58,1]},{"t":1750,"v":{"x":1,"y":0.967894},"e":[0.42,0,1,1]},{"t":2000,"v":{"x":1,"y":1},"e":[0,0,0.58,1]}]}}},"shipping-white-s-g1":{"transform":{"data":{"t":{"x":-62,"y":-64}},"keys":{"o":[{"t":0,"v":{"x":62.069927,"y":65,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":62,"y":64,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":62.069927,"y":65,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":62,"y":64,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":62.069927,"y":65,"type":"corner"},"e":[0.42,0,0.58,1]}]}}},"shipping-white-s-path2":{"d":[{"t":0,"v":["M",34,72,"L",34,79,"C",34,81.209139,35.790861,83,38,83,"L",41.81,83,"C",42.883393,81.149587,45.088402,79.010631,48,79.010631,"C",50.911598,79.010631,53.116607,81.149587,54.19,83,"L",73.81,83,"C",74.883393,81.149587,77.058001,79.021262,80,79.010631,"C",82.941999,79,85.116607,81.149587,86.19,83,"L",90,83,"C",92.209139,83,94,81.209139,94,79,"L",94,75,"L",94,75,"C",94.000789,74.377659,93.853392,73.764074,93.57,73.21,"L",85.57,59.21,"C",84.893356,57.85779,83.512056,57.002699,82,57,"L",70,57],"e":[0.42,0,0.58,1]},{"t":500,"v":["M",34,74,"L",34,79,"C",34,81.209139,35.790861,83,38,83,"L",42.81,83,"C",43.883393,81.149587,45.860794,80.010631,48,80.010631,"C",50.139206,80.010631,52.116607,81.149587,53.19,83,"L",74.81,83,"C",75.883393,81.149587,77.860794,80.010631,80,80.010631,"C",82.139206,80.010631,84.116607,81.149587,85.19,83,"L",90,83,"C",92.209139,83,94,81.209139,94,79,"L",94,75,"L",94,75,"C",94.000789,74.377659,93.853392,73.764074,93.57,73.21,"L",85.57,59.21,"C",84.893356,57.85779,83.512056,57.002699,82,57,"L",70,57],"e":[0.42,0,0.58,1]},{"t":1000,"v":["M",34,74,"L",34,79,"C",34,81.209139,35.790861,83,38,83,"L",41.81,83,"C",42.883393,81.149587,45.088402,79.010631,48,79.010631,"C",50.911598,79.010631,53.116607,81.149587,54.19,83,"L",73.81,83,"C",74.883393,81.149587,77.058001,79.021262,80,79.010631,"C",82.941999,79,85.116607,81.149587,86.19,83,"L",90,83,"C",92.209139,83,94,81.209139,94,79,"L",94,75,"L",94,75,"C",94.000789,74.377659,93.853392,73.764074,93.57,73.21,"L",85.57,59.21,"C",84.893356,57.85779,83.512056,57.002699,82,57,"L",70,57],"e":[0.42,0,0.58,1]},{"t":1140,"v":["M",34,74,"L",34,79,"C",34,81.209139,35.790861,83,38,83,"L",41.972856,83,"C",43.046249,81.149587,45.214191,79.173487,48,79.173487,"C",50.785809,79.173487,52.953751,81.149587,54.027144,83,"L",73.972856,83,"C",75.046249,81.149587,77.188741,79.182387,80,79.173487,"C",82.811259,79.164587,84.953751,81.149587,86.027144,83,"L",90,83,"C",92.209139,83,94,81.209139,94,79,"L",94,75,"L",94,75,"C",94.000789,74.377659,93.853392,73.764074,93.57,73.21,"L",85.57,59.21,"C",84.893356,57.85779,83.512056,57.002699,82,57,"L",70,57]},{"t":1500,"v":["M",34,74,"L",34,79,"C",34,81.209139,35.790861,83,38,83,"L",42.81,83,"C",43.883393,81.149587,45.860794,80.010631,48,80.010631,"C",50.139206,80.010631,52.116607,81.149587,53.19,83,"L",74.81,83,"C",75.883393,81.149587,77.860794,80.010631,80,80.010631,"C",82.139206,80.010631,84.116607,81.149587,85.19,83,"L",90,83,"C",92.209139,83,94,81.209139,94,79,"L",94,75,"L",94,75,"C",94.000789,74.377659,93.853392,73.764074,93.57,73.21,"L",85.57,59.21,"C",84.893356,57.85779,83.512056,57.002699,82,57,"L",70,57],"e":[0.42,0,0.58,1]},{"t":2000,"v":["M",34,74,"L",34,79,"C",34,81.209139,35.790861,83,38,83,"L",41.81,83,"C",42.883393,81.149587,45.088402,79.010631,48,79.010631,"C",50.911598,79.010631,53.116607,81.149587,54.19,83,"L",73.81,83,"C",74.883393,81.149587,77.058001,79.021262,80,79.010631,"C",82.941999,79,85.116607,81.149587,86.19,83,"L",90,83,"C",92.209139,83,94,81.209139,94,79,"L",94,75,"L",94,75,"C",94.000789,74.377659,93.853392,73.764074,93.57,73.21,"L",85.57,59.21,"C",84.893356,57.85779,83.512056,57.002699,82,57,"L",70,57],"e":[0.42,0,0.58,1]}]},"shipping-white-u-line":{"transform":{"data":{"t":{"x":-72.845,"y":-69}},"keys":{"o":[{"t":0,"v":{"x":32.845,"y":63.002619,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":30.845,"y":63.002619,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":32.845,"y":63.002619,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":30.845,"y":63.002619,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":32.845,"y":63.002619,"type":"corner"},"e":[0.42,0,0.58,1]}]}}},"shipping-white-u-line2":{"transform":{"data":{"t":{"x":-68.845,"y":-69}},"keys":{"o":[{"t":0,"v":{"x":28.845,"y":55.000001,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":30.845,"y":55.000001,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":28.845,"y":55.000001,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1500,"v":{"x":30.845,"y":55.000001,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":2000,"v":{"x":28.845,"y":55.000001,"type":"corner"},"e":[0.42,0,0.58,1]}]}}}},"s":"MDVA1ZDhmMzY3OXDg5ODY3NTg4EN2Q4MzgyMzYS0ZTQ2NDQ0NEXY0NDQwMzY3OHDdkODY3OUQ3ONzg4N2Q4MzgEyMzZKNGU0NTMQwMzY3ZDg4NIzk4Njc1ODg3GZDgzUjgyODdJOMzY0ZTQ0NDUAzNkI3YTdkOEDA4MDM2NGU0MNTQwMzY3NTgPwODg3OTg2ODDI3NTg4NzkzNEjRlN2E3NUE4MMDg3Nzk0MFlMFMzY4Nzg0NzFk3OTc4MzY0ZYTQ1NDAzNjdhQTzg0ODczNjRPlNDU0NDQ0OTVE/"}],"options":"MDVAyMVE4ZjM2OUDc4ODc1ODY4WODM2NGVTMzYC3YzgzOGE3OTIg2MzY0MDM2NX2M4MzhhNzk4DNjM2RzRlMzYC4Njc5ODc3OTPg4MzY5MQ|"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="gift" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path id="gift-s-path1" d="M41,60c0,0,0,23,0,23c0,2.209139,1.790861,4,4,4h38c2.209139,0,4-1.790861,4-4c0,0,0-23,0-23h-46Z" transform="translate(0 1)" fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10"/><path id="gift-s-path2" d="M62,62v23c0,1.104569.895431,2,2,2s2-.895431,2-2v-23Z" transform="translate(0 1)" fill="#fff" fill-opacity="0.5" stroke="#fff" stroke-width="4" stroke-miterlimit="10"/><g id="gift-u-lid" transform="translate(0 0.000001)"><path id="gift-s-path3" d="M87,46c0,0-46,0-46,0-2.209139,0-4,1.790861-4,4v10c0,0,54,0,54,0v-10c0-2.209139-1.790861-4-4-4Z" transform="translate(0 1)" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><g id="gift-u-bow" transform="translate(0 0.000001)"><path id="gift-s-path4" d="M83,36c-.92-4-5.93-5.28-9.35-3.07C69.73,35.47,66.39,39.62,66,47c3.21-2.68,8.15-2.42,12-3.26c3.406331-.914101,5.567151-4.25905,5-7.74Z" transform="translate(0 1)" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><path id="gift-s-path5" d="M54.35,32.93C50.93,30.72,45.92,32,45,36c-.567151,3.48095,1.593669,6.825899,5,7.74c3.89.84,8.83.58,12,3.26-.39-7.38-3.73-11.53-7.65-14.07Z" transform="translate(0 1)" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><path id="gift-s-path6" d="M66,59v-15c0-1.104569-.895431-2-2-2s-2,.895431-2,2v15Z" transform="translate(0 1)" fill="#fff" fill-opacity="0.5" stroke="#fff" stroke-width="4" stroke-miterlimit="10"/></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"gift","version":"2022-05-04","animations":[{"elements":{"gift-s-path1":{"d":[{"t":0,"v":["M",41,60,"C",41,60,41,83,41,83,"C",41,85.209139,42.790861,87,45,87,"L",83,87,"C",85.209139,87,87,85.209139,87,83,"C",87,83,87,60,87,60,"L",41,60,"Z"],"e":[0.215,0.61,0.355,0.95]},{"t":400,"v":["M",40.062453,63.812642,"C",38.795271,68.676167,37.787918,79.695872,39.6314,83.466579,"C",40.541089,85.465248,42.790861,87,45,87,"L",83,87,"C",85.209139,87,87.480984,85.514811,88.385326,83.51353,"C",90.201924,79.770597,88.992772,69.010189,87.937547,63.812642,"L",40.062453,63.812642,"Z"]},{"t":600,"v":["M",40,64,"C",38.648407,69.1875,37.573951,79.475774,39.540233,83.497659,"C",40.510519,85.482308,42.790861,87,45,87,"L",83,87,"C",85.209139,87,87.513024,85.535172,88.477607,83.547738,"C",90.415214,79.555476,89.125516,69.543772,88,64,"L",40,64,"Z"],"e":[0.1,0,0.8,0.995]},{"t":660,"v":["M",41,60,"C",41,60,41,83,41,83,"C",41,85.209139,42.790861,87,45,87,"L",83,87,"C",85.209139,87,87,85.209139,87,83,"C",87,83,87,60,87,60,"L",41,60,"Z"]},{"t":930,"v":["M",41,60,"C",41,60,41,83,41,83,"C",41,85.209139,42.790861,87,45,87,"L",83,87,"C",85.209139,87,87,85.209139,87,83,"C",87,83,87,60,87,60,"L",41,60,"Z"],"e":[0,0,0.58,1]},{"t":1000,"v":["M",40,62,"C",40,62,40,83,40,83,"C",40,85.209139,41.790861,87,44,87,"L",84,87,"C",86.209139,87,88,85.209139,88,83,"C",88,83,88,62,88,62,"L",40,62,"Z"],"e":[0.42,0,1,1]},{"t":1200,"v":["M",41,60,"C",41,60,41,83,41,83,"C",41,85.209139,42.790861,87,45,87,"L",83,87,"C",85.209139,87,87,85.209139,87,83,"C",87,83,87,60,87,60,"L",41,60,"Z"],"e":[0.215,0.61,0.355,0.95]}]},"gift-u-lid":{"transform":{"data":{"t":{"x":-64,"y":-53}},"keys":{"o":[{"t":0,"v":{"x":64,"y":53.000001,"type":"corner"},"e":[0.215,0.61,0.355,0.95]},{"t":400,"v":{"x":64,"y":56.75019,"type":"corner"}},{"t":600,"v":{"x":64,"y":57.000001,"type":"corner","end":{"x":63.225804,"y":52.953863}},"e":[0,0,0.58,1]},{"t":700,"v":{"x":64.188001,"y":40.000001,"type":"corner","end":{"x":63.413805,"y":35.953863}},"e":[0.5,0,1,1]},{"t":1000,"v":{"x":64,"y":55.000001,"type":"corner"},"e":[0.42,0,1,1]},{"t":1200,"v":{"x":64,"y":53.000001,"type":"corner"},"e":[0.215,0.61,0.355,1]}],"r":[{"t":600,"v":0,"e":[0,0,0.58,1]},{"t":660,"v":5.542988,"e":[0.42,0,0.58,1]},{"t":740,"v":-0.771052,"e":[0.42,0,1,1]},{"t":800,"v":0}]}}},"gift-s-path3":{"d":[{"t":600,"v":["M",87,46,"C",87,46,41,46,41,46,"C",38.790861,46,37,47.790861,37,50,"L",37,60,"C",37,60,91,60,91,60,"L",91,50,"C",91,47.790861,89.209139,46,87,46,"Z"],"e":[0.1,0,0.8,0.995]},{"t":700,"v":["M",86.967644,45.787696,"C",74.602735,43.602296,52.648761,43.845896,40.967644,45.787696,"C",38.788408,46.149959,37,47.790861,37,50,"L",37,60,"C",51.075163,57.898276,77.07057,57.946506,91,60,"L",91,50,"C",91,47.790861,89.143067,46.172185,86.967644,45.787696,"Z"],"e":[0.6,0,1,1]},{"t":800,"v":["M",87,46,"C",87,46,41,46,41,46,"C",38.790861,46,37,47.790861,37,50,"L",37,60,"C",37,60,91,60,91,60,"L",91,50,"C",91,47.790861,89.209139,46,87,46,"Z"],"e":[0.1,0,0.8,0.995]}]},"gift-u-bow":{"transform":{"data":{"t":{"x":-64,"y":-45.927294}},"keys":{"o":[{"t":600,"v":{"x":64,"y":45.927295,"type":"corner"},"e":[0.1,0,0.8,0.995]},{"t":700,"v":{"x":64,"y":43.927295,"type":"corner"}},{"t":750,"v":{"x":64,"y":43.927295,"type":"corner"}},{"t":1000,"v":{"x":64,"y":46.927295,"type":"corner"},"e":[0.42,0,1,1]},{"t":1200,"v":{"x":64,"y":45.927295,"type":"corner"}}]}}},"gift-s-path4":{"transform":{"data":{"o":{"x":66,"y":47,"type":"corner"},"t":{"x":-66,"y":-46}},"keys":{"r":[{"t":700,"v":0,"e":[0.8,-0.8,0.735,0.045]},{"t":1000,"v":9,"e":[0.6,0,1,1]},{"t":1200,"v":0}]}}},"gift-s-path5":{"transform":{"data":{"o":{"x":61.887077,"y":47.003191,"type":"corner"},"t":{"x":-61.887077,"y":-46.003191}},"keys":{"r":[{"t":700,"v":0,"e":[0.8,-0.8,0.735,0.045]},{"t":1000,"v":-9,"e":[0.6,0,1,1]},{"t":1200,"v":0}]}}}},"s":"MDFA1ZDkwMzc3ORVU4YTg3NzZBKODk3ZTg0ODMSzNzRmVDQ2NDCc0NTQ1NDEzNHzc5VzdlODc3FYTc4QTg5TjdHlODQ4MzM3NGYZFNDY0MTM3NX2U4OVY3YTg3ONzY4OTdlODREFODM4ODM3NGUY0NjQxMzc3YYkQ3ZUo4MTgxWMzc0ZlI0NkEK0MTM3NzY4MUCk4OTdhODc4MAzc2ODlGN2EzMNzRmN2I3NjgHxODg3YTQxSjWM3ODg4NTdhNC2E3OTM3NGY0YNjQxQzM3N2IY4NTg4Mzc0ZkMI0NjQ1NDU5MTg|"}],"options":"MDUAyMTkwMzc4OTDg5Ujc2ODc4NOTM3NGYzN1EV3ZDg0OGI3YTVg3Mzc0MTM3NP2Q4NEg4YjdhYODczNzRmMzcW4NzdhODg3YTNg5Mzc5MlM/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="support" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><g id="support-u-headphones"><path id="support-s-path1" d="M42,56c0-12.150264,9.849736-22,22-22s22,9.849736,22,22" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path id="support-s-path2" d="M41,77c-3.313708,0-6-2.686292-6-6v-6c0-3.313708,2.686292-6,6-6h1c1.148752,0,2.08.931248,2.08,2.08v13.84c0,1.148752-.931248,2.08-2.08,2.08Z" transform="translate(0-3)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path id="support-s-path3" d="M87,77c3.313708,0,6-2.686292,6-6v-6c0-3.313708-2.686292-6-6-6h-1c-1.148752,0-2.08.931248-2.08,2.08v13.84c0,1.148752.931248,2.08,2.08,2.08Z" transform="translate(0-3)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path id="support-s-path4" d="M68,79c9.19,0,16.86-8.165172,18.62-18.988774" transform="translate(0 14)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><line id="support-s-line1" x1="68" y1="79" x2="64" y2="79" transform="translate(0 14)" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g><g id="support-u-head"><circle id="support-u-head2" r="20" transform="translate(64 65)" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><g id="support-u-face" transform="translate(0 0.000002)"><path id="support-u-mouth" d="M10.5,0C10.5,5.79899,5.79899,10.5,0,10.5" transform="matrix(.707107 0.707107-.707107 0.707107 64 65)" opacity="0" fill="none" fill-opacity="0.5" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="24.75" stroke-dasharray="0,16.5"/><circle id="support-u-eye" r="1" transform="matrix(1.5 0 0 0 56 62.00962)" opacity="0" fill="#fff" fill-opacity="0.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle id="support-u-eye2" r="1" transform="matrix(1.5 0 0 0 72 62.00962)" opacity="0" fill="#fff" fill-opacity="0.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"support","version":"2022-05-04","animations":[{"elements":{"support-u-headphones":{"transform":{"data":{"t":{"x":-64,"y":-65}},"keys":{"o":[{"t":0,"v":{"x":64,"y":65,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":64,"y":64,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":64,"y":65,"type":"corner"}}]}}},"support-u-head":{"transform":{"data":{"t":{"x":-64,"y":-65}},"keys":{"o":[{"t":0,"v":{"x":64,"y":65,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":64,"y":63,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":64,"y":65,"type":"corner"}}]}}},"support-u-face":{"transform":{"data":{"t":{"x":-64,"y":-64.999998}},"keys":{"o":[{"t":0,"v":{"x":64,"y":65,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":64,"y":63,"type":"corner"},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":64,"y":65,"type":"corner"}}]}}},"support-u-mouth":{"opacity":[{"t":90,"v":0},{"t":100,"v":1}],"stroke-dashoffset":[{"t":100,"v":24.75,"e":[0.215,0.61,0.355,1]},{"t":400,"v":33}],"stroke-dasharray":[{"t":100,"v":[0,16.5],"e":[0.215,0.61,0.355,1]},{"t":400,"v":[16.5,0]}]},"support-u-eye":{"transform":{"data":{"o":{"x":56,"y":62.00962,"type":"corner"}},"keys":{"s":[{"t":0,"v":{"x":1.5,"y":0},"e":[0.215,0.61,0.355,1]},{"t":400,"v":{"x":1,"y":1}},{"t":700,"v":{"x":1,"y":1},"e":[0.42,0,1,1]},{"t":800,"v":{"x":1.5,"y":0.2},"e":[0,0,0.58,1]},{"t":900,"v":{"x":1,"y":1}}]}},"opacity":[{"t":0,"v":0,"e":[0.215,0.61,0.355,1]},{"t":400,"v":1,"e":[0.55,0.055,0.675,0.19]}]},"support-u-eye2":{"transform":{"data":{"o":{"x":72,"y":62.00962,"type":"corner"}},"keys":{"s":[{"t":0,"v":{"x":1.5,"y":0},"e":[0.215,0.61,0.355,1]},{"t":400,"v":{"x":1,"y":1}},{"t":700,"v":{"x":1,"y":1},"e":[0.42,0,1,1]},{"t":800,"v":{"x":1.5,"y":0.2},"e":[0,0,0.58,1]},{"t":900,"v":{"x":1,"y":1}}]}},"opacity":[{"t":0,"v":0,"e":[0.215,0.61,0.355,1]},{"t":400,"v":1,"e":[0.55,0.055,0.675,0.19]}]}},"s":"MDFA1ZGE4VzRmTFjkxYTI5ZjhlTYTE5NjljOWIV0ZkM2NzVlNWBQ1ZEY1ZDU5NMGY5MTk2TjlmHOTI5MGExOTYB5YzliNGY2NzNVlNTk0Zjk2YHTE5MjlmOGVVVYTE5NjljOWJUhMDRmNjc1ZTKU5QjRmOTM5NHjk5OTk0ZjY3WNWU1OTRmOGUK5OWExUzkyOWYY5YjhlYTE5MMjRmNjc5MzhlFOTlhMDkyNTkG0ZmEwOWQ5MjNkyOTE0ZjY3NOWVXNTk0ZjkzIOWRhMDRmNjcP1ZTVkNWRPYWBE/"}],"options":"MDKAyMzg1MmM3ZJDdlNmJFN2M3IZTJjNDQyYzcUyNzk4MDZmN2LMyYzM2MmM3MTlY3OTgwNmY3EYzJjTTQ0MmMJ3YzZmODA2ZjCdjSzdkNmYyYHzg3"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
</div>
<div class="row">
<div class="button">
<svg id="share" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g id="share-u-mask-group" mask="url(#share-u-masks)"><g id="share-u-lines" transform="translate(.000001 0.000001)"><line id="share-s-line1" x1="73.05" y1="79.64" x2="46" y2="64" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><line id="share-s-line2" x1="46" y1="64" x2="73.05" y2="48.4" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><ellipse id="share-s-ellipse1" rx="18" ry="18" transform="matrix(.5-.866025 0.866025 0.5 64 64)" fill="none" stroke="#fff" stroke-width="16" stroke-linecap="round" stroke-dasharray="0,37.69"/><mask id="share-u-masks" mask-type="luminance" x="-150%" y="-150%" height="400%" width="400%"><ellipse id="share-s-ellipse2" rx="18" ry="18" transform="matrix(.5-.866025 0.866025 0.5 64 64)" fill="#fff" stroke="#fff" stroke-width="16" stroke-linecap="round" stroke-dasharray="0,37.69"/><ellipse id="share-s-ellipse3" rx="18" ry="18" transform="matrix(.5-.866025 0.866025 0.5 64 64)" fill="none" stroke="#000" stroke-width="8" stroke-linecap="round" stroke-dasharray="0,37.69"/></mask></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"share","version":"2022-05-04","animations":[{"elements":{"share-u-lines":{"transform":{"data":{"o":{"x":64.014817,"y":64.000033,"type":"corner"},"t":{"x":-64.014816,"y":-64.000032}},"keys":{"r":[{"t":200,"v":0,"e":[0.215,0.61,0.355,1]},{"t":800,"v":90}]}}},"share-s-line1":{"transform":{"data":{"t":{"x":-59.525,"y":-71.82}},"keys":{"o":[{"t":0,"v":{"x":59.525,"y":71.82,"type":"corner"}},{"t":200,"v":{"x":64.025,"y":64,"type":"corner"}}],"r":[{"t":0,"v":0},{"t":200,"v":104.954032}]}}},"share-s-line2":{"transform":{"data":{"t":{"x":-59.525,"y":-56.2}},"keys":{"o":[{"t":0,"v":{"x":59.525,"y":56.2,"type":"corner"}},{"t":200,"v":{"x":64,"y":64,"type":"corner"}}],"r":[{"t":0,"v":0},{"t":200,"v":74.969712}]}}},"share-s-ellipse1":{"#radius":[{"t":0,"v":{"x":18,"y":18},"e":[0.215,0.61,0.355,1]},{"t":800,"v":{"x":35.990929,"y":35.990929}}],"transform":{"data":{"o":{"x":64,"y":64,"type":"corner"}},"keys":{"r":[{"t":0,"v":-60,"e":[0.215,0.61,0.355,1]},{"t":800,"v":270}]}},"stroke-width":[{"t":0,"v":16,"e":[0.215,0.61,0.355,1]},{"t":800,"v":10}]},"share-s-ellipse2":{"#radius":[{"t":0,"v":{"x":18,"y":18},"e":[0.215,0.61,0.355,1]},{"t":800,"v":{"x":35.990929,"y":35.990929}}],"transform":{"data":{"o":{"x":64,"y":64,"type":"corner"}},"keys":{"r":[{"t":0,"v":-60,"e":[0.215,0.61,0.355,1]},{"t":800,"v":270}]}},"stroke-width":[{"t":0,"v":16,"e":[0.215,0.61,0.355,1]},{"t":800,"v":10}]},"share-s-ellipse3":{"#radius":[{"t":0,"v":{"x":18,"y":18},"e":[0.215,0.61,0.355,1]},{"t":800,"v":{"x":35.990929,"y":35.990929}}],"transform":{"data":{"o":{"x":64,"y":64,"type":"corner"}},"keys":{"r":[{"t":0,"v":-60,"e":[0.215,0.61,0.355,1]},{"t":800,"v":270}]}},"stroke-width":[{"t":0,"v":8,"e":[0.215,0.61,0.355,1]},{"t":800,"v":4}]}},"s":"MDTA1Y0xkMzdhYImNjZGNhYjljPY2MxYzdjNjdDhTTkyOTA4ODOg4ODQ3YWJjYIzFjYWJkYmJjCY2MxYzdjNjdLhOTI4OUo4NDTdhQ2MxV2NjYKmRjYWI5Y2NjEMWM3YzZjYjdYhOTI4OTg0TzWdhYmVjMWM0YYzQ3YTkyODk4CNEs3YWI5YzRCJY2NiZGNhYzMZiOWNjYmQ3YQTkyYmViOWM0RY2JiZDg0N2FQjYmM4YmRiZGAJjN2E5Mjg5OSDQ3YUFiZWM4HY2I3YVg5MjgB5ODg4OGQ1"}],"options":"MDTAyM2EzNGFNOIWI5Y1Y4OTlhNOWM0YTYyNGES4Yjk0QjkxOGHI5MzRhNTQ0YWThiOTQ5MUo4RYjkzNGE2MkoM0YUI5YThkOWAU4ZDlhOWJHOWGQ0YWE1"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="cursor:pointer"><g id="star-u-mask-group" mask="url(#star-u-masks)"><polygon id="star-u-star" points="0,-29.589155 8.610584,-12.142207 27.864435,-9.344458 13.932217,4.236097 17.221168,23.412149 0,14.358445 -17.221168,23.412149 -13.932217,4.236097 -27.864435,-9.344458 -8.610584,-12.142207 0,-29.589155" transform="matrix(.9 0 0 0.9 64 64.85306)" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round"/><path id="star-u-wave" d="M108.828,42.71175c-9.444977-6.984808-18.768865,0-18.768865,0s-10.171514,6.984807-19.616491,0-18.768864,0-18.768864,0-10.171514,6.984807-19.616491,0-18.768865,0-18.768865,0-10.171513,6.984807-19.61649,0-18.768865,0-18.768865,0v37.66825h153.541421v-37.66825c0,0-10.171513,6.979735-19.61649,0Z" transform="matrix(1.292474 0 0 1.292474 46.417751 31.504037)" fill="#fff"/><mask id="star-u-masks" mask-type="luminance" x="-150%" y="-150%" height="400%" width="400%"><polygon id="star-u-star-mask" points="0,-29.589155 8.610584,-12.142207 27.864435,-9.344458 13.932217,4.236097 17.221168,23.412149 0,14.358445 -17.221168,23.412149 -13.932217,4.236097 -27.864435,-9.344458 -8.610584,-12.142207 0,-29.589155" transform="matrix(.9 0 0 0.9 64 64.85306)" fill="#fff" stroke="#fff" stroke-width="4" stroke-linejoin="round"/></mask></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"star","version":"2022-05-04","animations":[{"elements":{"star-u-star":{"transform":{"data":{"o":{"x":64,"y":64.85306,"type":"corner"}},"keys":{"s":[{"t":0,"v":{"x":0.9,"y":0.9}},{"t":1000,"v":{"x":1,"y":1}}]}}},"star-u-wave":{"transform":{"data":{"s":{"x":1.292474,"y":1.292474},"t":{"x":-50,"y":-60}},"keys":{"o":[{"t":0,"v":{"x":111.041451,"y":109.052477,"type":"corner"}},{"t":1000,"v":{"x":0.404723,"y":61.738638,"type":"corner"}}]}}},"star-u-star-mask":{"transform":{"data":{"o":{"x":64,"y":64.85306,"type":"corner"}},"keys":{"s":[{"t":0,"v":{"x":0.9,"y":0.9}},{"t":1000,"v":{"x":1,"y":1}}]}}}},"s":"MDFA1ZDhiMzI3NYEk4NTgyNzE4WNDc5N2Y3ZTMFyNGE0MTQwNDBA0MDNjMzI3NNDc5ODI3NTczWODQ3OTdmN2UPzMjRhNDEzYzWMyNzk4NFk3NKTgyNzE4NDc5QN2Y3ZVc4MzMKyNGE0MTNjVzVMyNzY3OTdjVYjdjMzI0YTQxDM2MzMjcxN2MU4NDc1ODI3ZTIcxODQ3NTMyNDGE3NjcxN2NFAODM3NTNjMzIY4MzgwNzU3NTEc0MzI0YTQxRCjNjMzI3NjgwBODMzMjRhNDEL0MDQwOGQ/"}],"options":"MDWAyMzhiMzI4MAzg0NzE4Mjg0SMzI0YTMyQzcXzN2M3OTczN2PIzMjNjMzI3MWzdjNzk3MzdiJMzJINGEzMksR4Mjc1ODY3NTXgyODNTNzUzMJjhk"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="sale" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><g id="sale-u-scale"><polygon id="sale-u-star" points="64,93 57.51,83.98 46.95,87.46 47.01,76.34 36.41,72.96 43,64 36.41,55.04 47.01,51.66 46.95,40.54 57.51,44.02 64,35 70.49,44.02 81.05,40.54 80.99,51.66 91.59,55.04 85,64 91.59,72.96 80.99,76.34 81.05,87.46 70.49,83.98 64,93" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><g id="sale-u-percent"><line id="sale-s-line1" x1="64" y1="74" x2="64" y2="55" transform="matrix(1 0-.509525 1 32.864391 0)" fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10"/><path id="sale-s-path1" d="M61,56c0-2.209139-1.790861-4-4-4s-4,1.790861-4,4v4c0,2.209139,1.790861,4,4,4s4-1.790861,4-4Z" transform="matrix(.75 0 0 0.666667 14.25 21.333312)" fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10"/><path id="sale-s-path2" d="M77,68c0-2.209139-1.790861-4-4-4s-4,1.790861-4,4v4c0,2.209139,1.790861,4,4,4s4-1.790861,4-4Z" transform="matrix(.75 0 0 0.666667 16.25 22.333312)" fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10"/></g></g>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"sale","version":"2022-05-04","animations":[{"elements":{"sale-u-scale":{"transform":{"data":{"o":{"x":63.999998,"y":64,"type":"corner"},"t":{"x":-63.999998,"y":-64}},"keys":{"s":[{"t":0,"v":{"x":1,"y":1},"e":[0.42,0,0.58,1]},{"t":500,"v":{"x":1.1,"y":1.1},"e":[0.42,0,0.58,1]},{"t":1000,"v":{"x":1,"y":1}}]}}},"sale-u-star":{"transform":{"data":{"o":{"x":64,"y":64,"type":"corner"},"t":{"x":-64,"y":-64}},"keys":{"r":[{"t":0,"v":0},{"t":1000,"v":36}]}},"stroke-width":[{"t":0,"v":4,"e":[0.42,0,0.58,1]},{"t":500,"v":3.66,"e":[0.42,0,0.58,1]},{"t":1000,"v":4}]}},"s":"MDFA1ZGQyNzliYMmNjYzliOGNiXT2MwYzZjNTcU5OTE4ODg3ODYc4NzgzNzliYNmMwYzlLYmNiDYWNiYzBjNmMJ1Nzk5MTg4ODQM3OWMwY2JiYK2M5YjhjYlhjUMGM2YzVjYTcT5OTE4NzgzNzXliZGMwYzNjMMzc5OTE4ODgzVNzliOGMzY2JBiY2M5YzVOYjJhjYmJjNzk5MQWJkYjhjM2NhDYmM4Mzc5Y2FSjN2JjYmNiYkSg3OVY5MTg4OXDM3OVBiZGM3IY2E3OVI5MTgK4ODc4N2Q0"}],"options":"MDXAyMjg1MmM3ZTDdlNmI3YzdlGMmM0NDJjUzcSyNzk4MDZmN2NNTMmMzNjJjNDzI3OTgwNmY3RYzJjNDRQMmMA3MDdjNmY2ZjCg0NmYyYzg3"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
<div class="button">
<svg id="location-white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path id="location-white-s-path1" d="M51.38,78.72C48.06,79.81,46,81.32,46,83c0,3.31,8.06,6,18,6s18-2.69,18-6c0-1.68-2.06-3.19-5.38-4.28" fill="none" fill-opacity="0.5" stroke="#fff" stroke-width="4" stroke-linecap="round"/><path id="location-white-u-pin" d="M52,68.69c-4.87416-4.85733-6.3394-12.17394-3.71157-18.53362s8.83036-10.50797,15.71157-10.50797s13.08375,4.14829,15.71157,10.50797s1.16259,13.6763-3.71157,18.53362l-12,12c-5.267595-4.987175-12-12-12-12ZM64,63c3.31371,0,6-2.68629,6-6s-2.68629-6-6-6-6,2.68629-6,6s2.68629,6,6,6Z" fill="#fff" fill-opacity="0" stroke="#fff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10"/>
<script><![CDATA[\
(function(s,i,u,o,c,w,d,t,n,x,e,p,a,b){(a=document.getElementById(i.root)).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s','?','v','=',c].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"location-white","version":"2022-05-04","animations":[{"elements":{"location-white-u-pin":{"d":[{"t":300,"v":["M",52,68.69,"C",47.12584,63.83267,45.6606,56.51606,48.28843,50.15638,"C",50.91626,43.79669,57.11879,39.64841,64,39.64841,"C",70.88121,39.64841,77.08375,43.7967,79.71157,50.15638,"C",82.3394,56.51607,80.87416,63.83268,76,68.69,"L",64,80.69,"C",58.732405,75.702825,52,68.69,52,68.69,"Z","M",64,63,"C",67.31371,63,70,60.31371,70,57,"C",70,53.68629,67.31371,51,64,51,"C",60.68629,51,58,53.68629,58,57,"C",58,60.31371,60.68629,63,64,63,"Z"]},{"t":500,"v":["M",64,68.69,"C",64,62.568497,64,56.639513,64,50.15638,"C",64,43.673247,64,39.64841,64,39.64841,"C",64,39.64841,64,43.633882,64,50.15638,"C",64,56.678878,64,62.607862,64,68.69,"L",64,80.69,"C",64,80.69,64,68.69,64,68.69,"Z","M",64,64,"C",64,64,64,61.021384,64,57,"C",64,52.978616,64,50,64,50,"C",64,50,64,53.004372,64,57,"C",64,60.995628,64,64,64,64,"Z"]},{"t":700,"v":["M",52,68.69,"C",47.12584,63.83267,45.6606,56.51606,48.28843,50.15638,"C",50.91626,43.79669,57.11879,39.64841,64,39.64841,"C",70.88121,39.64841,77.08375,43.7967,79.71157,50.15638,"C",82.3394,56.51607,80.87416,63.83268,76,68.69,"L",64,80.69,"C",58.732405,75.702825,52,68.69,52,68.69,"Z","M",64,65,"C",68.725422,65,72,61.688249,72,57,"C",72,52.311751,68.725422,49,64,49,"C",59.274578,49,56,52.354933,56,57,"C",56,61.645067,59.354943,65,64,65,"Z"]}],"transform":{"data":{"t":{"x":-63.999998,"y":-80.69}},"keys":{"o":[{"t":300,"v":{"x":63.999998,"y":80.69,"type":"corner"},"e":[0,0,0.58,1]},{"t":500,"v":{"x":63.999998,"y":60.69,"type":"corner"},"e":[0.42,0,1,1]},{"t":700,"v":{"x":63.999998,"y":80.69,"type":"corner"}}],"s":[{"t":0,"v":{"x":1,"y":1},"e":[0,0,0.58,1]},{"t":150,"v":{"x":1.1,"y":0.9},"e":[0.42,0,1,1]},{"t":300,"v":{"x":0.9,"y":1.1},"e":[0,0,0.58,1]},{"t":500,"v":{"x":1,"y":1},"e":[0.42,0,1,1]},{"t":700,"v":{"x":0.9,"y":1.1},"e":[0,0,0.58,1]},{"t":850,"v":{"x":1.1,"y":0.9},"e":[0.42,0,1,1]},{"t":1000,"v":{"x":1,"y":1}}]}},"fill-opacity":[{"t":500,"v":0},{"t":510,"v":1}]}},"s":"MDNA1ZGQ1N2NiZEWNmY2NiYlFjQZWMzYzljODdHjOTQ4YjhhOGME4YTg2N2NiZNU1jM2NjU2JmTYmRJY2VLYzNSjOWM4N2M5NDLhiODY3Y0VjMD2NlYmZjY0tiGYmNlYzNjOWMD4Y2Q3Yzk0OGHI4NjdjYzBjMQ2M2TWM2N2M5RNDhiODY3Y2JIiYzZjZWJmY2JNjOGJiY2VOYCmY3Yzk0YzBiWYkVjNmNkYmYI4NjdjY2RjYWUJmYmZFYmVCNT2M5NDhiWDg2XN2NjMGNhY2QL3Yzk0OGI4YTAhhZDdO"}],"options":"MDLAyMzliVTQyOYTM5NDgxOTI5JNDQyNWE0MjgE4OGY5Njg1STYkyNDI0Y1g0MVjg4RzhmOTY4YNTkyNDI1YTQKyOTI4NTk2ODGU5MjkzODU0MKjlk"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2022-05-04',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')\
]]></script>
</svg>
</div>
</div>
<p id="love">animations made with <span>❤ </span>in <a id="svgator" href="https://www.svgator.com/" target="_blank">SVGator</a> </p>
</div>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;800&display=swap');
body {
background-color: #324059;
color: white;
font-family: 'Montserrat', sans-serif;
text-align: center;
}
h1{
font-size: 1.5em;
}
p{
font-size: 1em;
font-weight: 500;
}
.flex{
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.row{
display: flex;
}
.button {
padding: 4px;
margin: 8px;
border-radius: 48px;
width: 64px;
height: 64px;
overflow: hidden;
background-color: #475B7F;
box-shadow: 0px 4px 4px rgba(0, 0, 25, 0.2);
}
.button:hover {
background-color: #556989;
}
.button:active {
box-shadow: 0 3px rgba(0, 0, 25, 0.38);
transform: translateY(2px);
color: #fff;
}
#love {
color: rgba(250, 250, 255, 0.38);
padding-top: 64px;
-webkit-tap-highlight-color: transparent;
padding-top: 3%
font-size: 1.2vw;
}
#svgator {
color: rgba(250, 250, 255, 0.68);
}
#svgator:hover {
color: #fff;
}
a:visited {
color: rgba(250, 250, 255, 1);
}
Animated svg buttons
Click or hover on these buttons
Super lightweight, 3-9Kb only!
animations made with ❤ in SVGator
This Pen is owned by Tunde Dosa on CodePen.
See more by @tundedosa on CodePen
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.
Neumorphic animation effect - Made by SVGator
Animated mobile app buttons - Made by SVGator
Animated toggle buttons
Toggle switches carry more weight than their size suggests. A smooth transition from off to on confirms the action, signals the current state, and adds character to a setting that would otherwise be plain.
Animated toggle switch - Made by SVGator
Smiley-face toggle button - Made by SVGator
Neumorphic toggle buttons - Made by SVGatorSimple animated toggle buttons - Made by SVGator
SVG line animations
Handwriting, self-drawing, and self-erasing effects are some of the best ways to animate text and line-based illustrations. Path animation might look complex at first glance, but it comes down to tweaking offset and dash properties over time. Dotted and dashed line variations follow the same logic. Most of the effort happens when drawing the path itself, not when animating the movement along it.
Gaming console animation - Made by SVGator
Map motion design - Made by SVGator
SVG along path motion design - Made by SVGator
Infinity path animation - Made by SVGator
SVG animation along a path - Made by SVGator
Car race animation with motion path - Made by SVGator
Motion-path graphic design animation - Made by SVGator
"The Cookies" animated text - Made by SVGator
Animated biker - Made by SVGator
City-like line animation - Made by SVGatorMotion along path - Made by SVGator
Animated characters
Character animation is one of those things that looks impossible until you actually do it. A cartoon mascot that reacts to hover feels interactive, a walking character gives a loading screen something to watch, and a face that nods during onboarding confirms the user is on the right track.
Hover effects example - Made by SVGator
Dessert motion graphics - Made by SVGator
Quirky character illustration - Made by SVGator
Animated game characters - Made by SVGator
Cartoon drawing - Made by SVGator
Animated characters - Made by SVGator
Radiant animated graphics - Made by SVGator
Woman character holding a key - Made by SVGator
Dancing blue cactus (hover over him to make him dance!) - Made by SVGator
Boy spinning a basketball - Made by SVGator
Robot animated illustration - Made by SVGator
Man walking his dog - Made by SVGator
Morph animation examples
Morph animations blend one shape smoothly into another. They work well for logos, illustrated loops, and playful state transitions where one element has to become another. The technique comes down to matching node counts and adjusting point positions over time, with the SVG renderer handling the rest.
Morphing animation works best between shapes that share some structural logic: circle to square, leaf to flower, one letter to another. When the two shapes are too different, the intermediate frames turn into visual noise and the effect breaks down. Matching paths with a similar number of anchor points is usually the difference between a clean morph and a blurry in-between.
Morphing animation effect - Made by SVGator
App UI animation - Made by SVGator
Fire morphing animation - Made by SVGator
Flying origami bird - Made by SVGator
Swimming jellyfish - Made by SVGator
Hand changing shapes - Made by SVGator
Start creating your own SVG animations! 🏗️
Faux 3D SVG animations
SVG is a 2D format, but that does not stop it from looking three-dimensional. The most convincing faux 3D effects rely on stacking multiple SVG layers and animating them at slightly different speeds. A front layer that moves faster than a back layer instantly reads as depth. Pair that with a directional shadow that updates as the object rotates, and the flat vector starts feeling solid.
Isometric illustrations are another strong candidate: their built-in perspective already suggests three dimensions, so even a small rotation or float makes the scene feel alive.
Soda can 3D faux animation - Made by SVGator
Diamond 3D motion design - Made by SVGator
Fake 3D box animation - Made by SVGator
Fake 3D motion graphics - Made by SVGator
Animated background with geometric shapes - Made by SVGator
Fake 3D card flip effect - Made by SVGator
Faux 3D animation effect - Made by SVGator | Illustration by Ivan Mesaros
SVG text animations
A stylized SVG text animation does more than decorate. It anchors the message, sets the mood, and usually outperforms a static headline at holding attention.
Most SVG text animations come down to three core approaches: animate the stroke to create a self-drawing effect, animate the fill for color reveals, or convert the type to paths so each letter can animate on its own timeline. The approach you pick depends on how much control you need over individual characters and how the final effect should feel.
Kinetic typography - Made by SVGator
Neon accents animation - Made by SVGator
Let's move - Made by Holke79
Animated typography - Made by SVGator
Animated hero section - Made by SVGatorAnimated signature - Made by SVGator
Animated sales-themed stickers - Made by SVGator
Dark radiant animated graphics - Made by SVGator
Fake 3D kinetic typography - Made by SVGator
Cyber Monday animation - Made by SVGator
SVG product presentation examples
Product presentations perform better when the item actually moves. Animated SVG can rotate a device, explode a diagram into labeled parts, highlight features one by one on scroll, or walk a visitor through a before-and-after comparison. Because SVG renders as code rather than a raster image, these presentations stay sharp at any screen size without bloating the page.
Mixed media animation example - Made by SVGator
Animated product presentation - Made by SVGator
Mobile product animation - Made by SVGator
Product animation - Made by SVGator
Technical schematics animation - Made by GyGinfographics
Ecommerce product animation - Made by SVGator
Data visualization animations
Animated data visualizations turn static numbers into something people actually read. Bar charts that grow on scroll, donut charts that fill as percentages count up, line graphs that draw themselves from left to right, and dashboards where each widget enters in sequence all make data easier to absorb.
Keep data animation purposeful. A bar that grows from zero helps the viewer compare heights; a pie slice that fans open draws the eye to the largest segment. But gratuitous motion (bouncing grid lines, spinning labels, pulsing axes) pulls attention away from the numbers and makes the chart harder to read. The best animated charts finish their entrance within two seconds and then sit still, letting the data do the talking.
Pie chart of export types distribution Aug 2025 (SVGator)
Growth of export types chart (SVGator Data, Jun 2024 - Aug 2025)
Data visualization - Made by SVGator
Export Format Preferences by User Type - Made by SVGator
Types of projects made by designers in SVGartor
Animation completion time in SVGator
Types of projects made by developers in SVGartor
Time Investment per Animation Type in SVGator
Growth of export types (SVGator Data, Jun 2024 - Aug 2025)
Neumorphic charts animation - Made by SVGator
Data visualization - Made by SVGator
UI animation examples
A full interface has dozens of surfaces that benefit from motion. Page transitions that slide content in and out, tab switches with crossfade effects, accordion sections that expand smoothly, tooltip entrances, notification badges that scale in, skeleton screens that pulse while real content loads, and scroll-progress indicators that fill a thin bar across the top of the viewport are all small touches that make a UI feel responsive and polished.
Background web animation - Made by SVGator
Learning app animation - Made by SVGator
UI/UX storytelling animation - Made by SVGator
Microinteraction web animation - Made by SVGator
Error page animation for desktop - Made by SVGator
UI design in a mobile device mock-up - Made by SVGator
Login UI animation for mobile apps - Made by SVGator
Animated background with patterns changing shapes - Made by SVGator
Onboarding tour for a mobile travel app - Made by SVGator
App character animation - Made by SVGator
Mobile UI/UX animated onboarding example - Made by SVGator
How to create a simple SVG animation in SVGator?
Creating a simple SVG animation in SVGator takes five steps.
How to Create a Simple SVG Animation from Scratch | SVGator - YouTube
Tap to unmute
How to Create a Simple SVG Animation from Scratch | SVGator SVGator
SVGator7.98K subscribers
Draw The Shape: Use the Rectangle tool to draw a rounded rectangle for the bubble, then add a smaller square rotated 45 degrees to form the tail. Select both shapes and group them into a single layer called "message bubble".
Add Animators: Select the group, open the animator list, and add a Scale animator followed by a Rotate animator. Each one creates its own track on the timeline.
Animate The Scale: Set the scale to 0 at the start of the timeline, move the playhead to around 1 second, and raise the scale to 1.1, then bring it back to 1 at 1.5 seconds. This produces the bounce on entry.
Animate The Rotation: Start the rotation at -10 degrees, move the playhead to 1 second, and set it to +5 degrees, then return it to 0 at 1.5 seconds. This adds a subtle wiggle that pairs with the bounce.
Preview And Adjust: Hit play to see both animators running together, then fine-tune individual keyframes to smooth the timing or change the feel of the motion.
Final thoughts
Learning to animate SVG starts with picking the one effect that caught your eye and trying to recreate it. All of the animations in this list can be built in SVGator, which is the quickest path from a static vector file to a working animated SVG without writing code.
Vector drawing animation - Made by SVGator
Twitter share icon Facebook share icon The link has been copied!
See more
32 animated SVG background examples for web design inspiration
32 animated SVG background examples for web design inspiration
50+ animated 404 page examples to keep visitors on your site
50+ animated 404 page examples to keep visitors on your site
75 preloader examples for a seamless user experience
75 preloader examples for a seamless user experience
Mobile App Animation: 12 Patterns Every Designer Should Study
Mobile App Animation: 12 Patterns Every Designer Should Study
Please enter at least 3 characters0 Results for your search
Shares
reCAPTCHA
Recaptcha requires verification.
protected by reCAPTCHA