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;
}

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.