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>&#10084 </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);
}

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.