SVG Animated Logo using HTML CSS and JavaScript

Share your love

Welcome to our latest blog post where we dive into the captivating world of web animation! In this tutorial, we’ll guide you through the process of creating a stunning SVG Animated Logo using the power trio of HTML, CSS, and JavaScript. Get ready to breathe life into your designs as we explore the dynamic possibilities of SVG graphics. Let’s embark on this creative journey together!

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen SVG Loader by Kass (@kassandrasanch) on CodePen.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>SVG Animated Logo using HTML CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your <body> tag.

<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1056 248"><defs><style></style></defs><path d="M85,184q0,19.58-16.82,19.57h-.47v30.6q23.84-.13,36.41-13.77t12.69-38.84V151.22H85ZM104.1,27.66Q91.53,14,67.69,13.89v30.6h.47Q85,44.48,85,64.36V89.13h31.81V66.5Q116.79,41.42,104.1,27.66Z"/><path d="M224.14,144.49q-5.87-11.09-19-24l-24,24a78.33,78.33,0,0,1,11.19,13.88,45.38,45.38,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.29,5.05-13,5.05q-17.45,0-17.44-20.8V168H131.77v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.78-14.07t13-40.37Q232.09,159.48,224.14,144.49Z"/><path d="M337.92,144.49Q330.55,130.66,312,114L288.08,137.9q12.81,11.76,18,20.5a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.43,16.36s-7.31,5.05-13,5.05q-17.43,0-17.43-20.8V168H245.55v12.24q0,26,12.54,39.9t37,13.93q24.76,0,37.78-14.07t13-40.37Q345.87,159.48,337.92,144.49Z"/><path d="M485.65,17h-24V54.27h.16l15,105.82H461.63v29.06h19.12v-.61l6.12,42.51h33.64Z"/><path d="M637.34,219.88a142.71,142.71,0,0,1-.62-14.83V167.43q0-19-5-30.28a26.24,26.24,0,0,0-17.28-15v-.61q22-8.86,22-42.2V66.19q0-25.08-11.93-37.16T586.56,17h-.14v30.6q8.28.23,12.23,5.19,4.13,5.19,4.12,16.82V86.07q0,12.24-5,17.44c-2.69,2.76-6.47,4.44-11.31,5v31q8.15.93,11.93,5.56,4.73,5.82,4.73,20.5v39.15a149.24,149.24,0,0,0,.61,16.51,49.33,49.33,0,0,0,2.45,9.79h34.25A37.28,37.28,0,0,1,637.34,219.88Z"/><path d="M702.64,17v214.1h16.67V47.54h35.17V17Z"/><path d="M787.06,17v214.1h17.27V17Z"/><path d="M916,144.49q-6.65-12.5-22.39-27.3l-24,24q10.08,9.74,14.56,17.24a45.48,45.48,0,0,1,6.12,23.71c0,7.55-1.48,13-4.44,16.36s-7.3,5.05-13,5.05q-17.43,0-17.43-20.8V168H823.6v12.24q0,26,12.54,39.9t37,13.93q24.78,0,37.77-14.07t13-40.37Q923.92,159.48,916,144.49Z"/><path d="M986.31,17v214.1h16.83V47.54h35.17V17Z"/><rect class="cls-1" x="44.45" y="87.82" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="70.21" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,52.59v3.6h7.81a20,20,0,0,1,1.28-3.6Z"/><rect class="cls-1" x="44.45" y="34.97" width="23.25" height="3.6"/><path class="cls-1" d="M67.69,21v-3.6H45.9c-.5.19-1,.39-1.45.59v3Z"/><rect class="cls-1" x="44.45" y="79.01" width="6.89" height="3.6"/><path class="cls-1" d="M44.45,61.4V65h6.88v-.64c0-1,.05-2,.12-3Z"/><path class="cls-1" d="M44.45,43.78v3.6H57.77a16.88,16.88,0,0,1,9.92-2.89v-.71Z"/><rect class="cls-1" x="44.45" y="26.16" width="23.25" height="3.6"/><rect class="cls-1" x="44.14" y="87.82" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="34.97" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,21v-3l-.31.12V21Z"/><rect class="cls-1" x="44.14" y="79.01" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="44.45" y="175.91" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="158.29" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="140.67" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="123.06" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="105.44" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="167.1" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="149.48" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="131.86" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="114.25" width="6.89" height="3.6"/><rect class="cls-1" x="44.45" y="96.63" width="6.89" height="3.6"/><rect class="cls-1" x="44.14" y="175.91" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="158.29" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="140.67" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="123.06" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="105.44" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="167.1" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="149.48" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="131.86" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="114.25" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="96.63" width="0.31" height="3.6"/><path class="cls-1" d="M44.45,228.76v1.3a48.89,48.89,0,0,0,7.08,2.3H67.69v-3.6Z"/><rect class="cls-1" x="44.45" y="211.14" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,193.53v3.6h10a16.37,16.37,0,0,1-1.7-3.6Z"/><rect class="cls-1" x="44.45" y="219.95" width="23.25" height="3.6"/><path class="cls-1" d="M44.45,205.93H67.69v-2.42A19.78,19.78,0,0,1,61,202.33H44.45Z"/><path class="cls-1" d="M44.45,184.72v3.6h7.13c-.14-1.14-.2-2.34-.23-3.6Z"/><path class="cls-1" d="M44.14,228.76v1.18l.31.12v-1.3Z"/><rect class="cls-1" x="44.14" y="211.14" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="193.53" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="219.95" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="202.33" width="0.31" height="3.6"/><rect class="cls-1" x="44.14" y="184.72" width="0.31" height="3.6"/><polygon class="cls-1" points="43.83 87.82 17.69 87.82 17.69 91.42 43.83 91.42 44.14 91.42 44.14 87.82 43.83 87.82"/><polygon class="cls-1" points="43.83 70.2 17.69 70.2 17.69 73.81 43.83 73.81 44.14 73.81 44.14 70.2 43.83 70.2"/><path class="cls-1" d="M43.83,52.59h-25c-.2,1.17-.37,2.37-.52,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,35H25c-.67,1.16-1.3,2.36-1.88,3.6h21V35Z"/><path class="cls-1" d="M43.83,21h.31V18.06A42.69,42.69,0,0,0,38.55,21Z"/><polygon class="cls-1" points="43.83 79.01 17.69 79.01 17.69 82.61 43.83 82.61 44.14 82.61 44.14 79.01 43.83 79.01"/><path class="cls-1" d="M43.83,61.4h-26c-.07,1.18-.11,2.38-.13,3.6H44.14V61.4Z"/><path class="cls-1" d="M43.83,43.78H21q-.59,1.76-1.08,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,26.16h-12c-.5.49-1,1-1.46,1.5-.63.68-1.22,1.38-1.8,2.1H44.14v-3.6Z"/><polygon class="cls-1" points="43.83 175.91 17.69 175.91 17.69 179.51 43.83 179.51 44.14 179.51 44.14 175.91 43.83 175.91"/><polygon class="cls-1" points="43.83 158.29 17.69 158.29 17.69 161.89 43.83 161.89 44.14 161.89 44.14 158.29 43.83 158.29"/><polygon class="cls-1" points="43.83 140.67 17.69 140.67 17.69 144.27 43.83 144.27 44.14 144.27 44.14 140.67 43.83 140.67"/><polygon class="cls-1" points="43.83 123.06 17.69 123.06 17.69 126.66 43.83 126.66 44.14 126.66 44.14 123.06 43.83 123.06"/><polygon class="cls-1" points="43.83 105.44 17.69 105.44 17.69 109.04 43.83 109.04 44.14 109.04 44.14 105.44 43.83 105.44"/><polygon class="cls-1" points="43.83 167.1 17.69 167.1 17.69 170.7 43.83 170.7 44.14 170.7 44.14 167.1 43.83 167.1"/><polygon class="cls-1" points="43.83 149.48 17.69 149.48 17.69 153.08 43.83 153.08 44.14 153.08 44.14 149.48 43.83 149.48"/><polygon class="cls-1" points="43.83 131.86 17.69 131.86 17.69 135.46 43.83 135.46 44.14 135.46 44.14 131.86 43.83 131.86"/><polygon class="cls-1" points="43.83 114.25 17.69 114.25 17.69 117.85 43.83 117.85 44.14 117.85 44.14 114.25 43.83 114.25"/><polygon class="cls-1" points="43.83 96.63 17.69 96.63 17.69 100.23 43.83 100.23 44.14 100.23 44.14 96.63 43.83 96.63"/><path class="cls-1" d="M43.83,228.76H41.58c.83.42,1.69.81,2.56,1.18v-1.18Z"/><path class="cls-1" d="M43.83,211.14H24c.65,1.24,1.34,2.45,2.09,3.6H44.14v-3.6Z"/><path class="cls-1" d="M43.83,193.53H18.51c.18,1.22.4,2.42.64,3.6h25v-3.6Z"/><path class="cls-1" d="M43.83,220H30.05c.11.13.22.27.34.39a38.77,38.77,0,0,0,3.33,3.21H44.14V220Z"/><path class="cls-1" d="M43.83,202.33H20.44c.36,1.23.76,2.44,1.2,3.6h22.5v-3.6Z"/><path class="cls-1" d="M43.83,184.72H17.75c0,1.22.11,2.41.2,3.6H44.14v-3.6Z"/><rect class="cls-1" x="220.62" y="70.21" width="10.86" height="3.6"/><path class="cls-1" d="M220.62,52.59v3.6h10.17c-.15-1.23-.32-2.43-.53-3.6Z"/><path class="cls-1" d="M220.62,35v3.6H226q-.85-1.86-1.83-3.6Z"/><path class="cls-1" d="M220.62,61.4V65h10.82c0-1.22-.08-2.43-.15-3.6Z"/><path class="cls-1" d="M220.62,43.78v3.6h8.51c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M220.62,29.76h.11l-.11-.15Z"/><rect class="cls-1" x="220.31" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="220.31" y="43.78" width="0.31" height="3.6"/><path class="cls-1" d="M220.31,29.25v.51h.31v-.15Z"/><path class="cls-1" d="M175.63,91.42c-1-1.24-1.83-2.44-2.59-3.6H135.28c.36,1.22.75,2.42,1.18,3.6Z"/><path class="cls-1" d="M132.66,73.8H167c-.27-1.18-.47-2.38-.63-3.59H132.53V72C132.57,72.58,132.61,73.2,132.66,73.8Z"/><polygon class="cls-1" points="220.01 70.2 199.67 70.2 199.67 73.81 220.01 73.81 220.31 73.81 220.31 70.2 220.01 70.2"/><path class="cls-1" d="M133.06,56.19h34a19.31,19.31,0,0,1,1.31-3.6H133.6C133.39,53.76,133.22,55,133.06,56.19Z"/><path class="cls-1" d="M220,52.59H197.34a21.07,21.07,0,0,1,1.29,3.6h21.68v-3.6Z"/><path class="cls-1" d="M220,35H139.92c-.68,1.16-1.32,2.36-1.91,3.6h82.3V35Z"/><path class="cls-1" d="M211,21a41.51,41.51,0,0,0-7.25-3.6H161a43.55,43.55,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M134,82.61h36.13c-.57-1.18-1.1-2.38-1.55-3.6H133.29Q133.57,80.84,134,82.61Z"/><path class="cls-1" d="M166,65v0c0-1.26.06-2.43.16-3.57H132.56l0,.63v3Z"/><path class="cls-1" d="M220,61.4H199.48c.1,1.14.16,2.33.18,3.6h20.65V61.4Z"/><path class="cls-1" d="M220,43.78H135.88q-.6,1.76-1.11,3.6h37.8q4-2.9,10.28-2.9a16.93,16.93,0,0,1,10.23,2.9h27.23v-3.6Z"/><path class="cls-1" d="M219.1,27.8c-.5-.56-1-1.11-1.55-1.64H146.84c-.55.53-1.09,1.08-1.61,1.64s-1.14,1.29-1.69,2h76.77v-.51C219.92,28.76,219.52,28.27,219.1,27.8Z"/><path class="cls-1" d="M132.53,70.21h-.08c0,.58.05,1.17.08,1.76Z"/><path class="cls-1" d="M132.53,65V62c-.05,1-.09,2-.11,3Z"/><path class="cls-1" d="M185,140.67h-7.74c1.28,1.23,2.51,2.43,3.65,3.6h.49Z"/><path class="cls-1" d="M202.6,123.06H158.32q1.76,1.77,3.64,3.6h37Z"/><path class="cls-1" d="M192.69,109q-2.07-1.85-3.94-3.6H143.62q1.19,1.77,2.53,3.6Z"/><path class="cls-1" d="M193.79,131.86H167.55l2.15,1.93c.65.56,1.26,1.12,1.89,1.67h18.6Z"/><path class="cls-1" d="M202.46,117.85q-1.87-1.78-3.89-3.6H150.26q1.5,1.77,3.15,3.6Z"/><path class="cls-1" d="M140.45,100.23h43c-1.2-1.23-2.34-2.43-3.4-3.6H138.62Q139.48,98.46,140.45,100.23Z"/><rect class="cls-1" x="313.45" y="70.21" width="31.81" height="3.6"/><path class="cls-1" d="M311.11,52.59a20.25,20.25,0,0,1,1.3,3.6h32.16c-.16-1.23-.33-2.43-.53-3.6Z"/><path class="cls-1" d="M308.7,35v3.6h31.11c-.57-1.24-1.18-2.44-1.84-3.6Z"/><path class="cls-1" d="M324.75,21a42,42,0,0,0-7.26-3.6H308.7V21Z"/><path class="cls-1" d="M313.26,61.4c.1,1.14.16,2.33.18,3.6h31.78c0-1.22-.08-2.43-.16-3.6Z"/><path class="cls-1" d="M308.7,43.78v3.6h34.21c-.32-1.24-.68-2.43-1.07-3.6Z"/><path class="cls-1" d="M308.7,29.76h25.8c-.52-.67-1.06-1.32-1.62-2s-1-1.11-1.56-1.64H308.7Z"/><rect class="cls-1" x="308.4" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="308.4" y="26.16" width="0.31" height="3.6"/><polygon class="cls-1" points="308.7 114.25 308.7 117.27 311.73 114.25 308.7 114.25"/><polygon class="cls-1" points="308.4 114.25 308.4 117.58 308.7 117.27 308.7 114.25 308.4 114.25"/><path class="cls-1" d="M289.41,91.42q-1.44-1.86-2.6-3.6H249.05c.37,1.22.76,2.42,1.19,3.6Z"/><path class="cls-1" d="M280.77,73.8c-.26-1.18-.47-2.38-.62-3.59H246.23c0,1.21.11,2.41.21,3.59Z"/><path class="cls-1" d="M246.84,56.19h34a20.05,20.05,0,0,1,1.32-3.6H247.38Q247.07,54.35,246.84,56.19Z"/><path class="cls-1" d="M308.09,35H253.7c-.68,1.16-1.32,2.36-1.91,3.6H308.4V35Z"/><path class="cls-1" d="M308.09,21h.31v-3.6H274.81a43.19,43.19,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M283.86,82.61c-.57-1.18-1.1-2.38-1.56-3.6H247.07c.19,1.22.4,2.42.65,3.6Z"/><path class="cls-1" d="M279.81,65v0c0-1.26.06-2.43.15-3.57H246.34c-.07,1.17-.12,2.38-.14,3.6Z"/><path class="cls-1" d="M308.09,43.78H249.66c-.4,1.17-.78,2.37-1.11,3.6h37.8q3.94-2.9,10.28-2.9a17,17,0,0,1,10.23,2.9h1.54v-3.6Z"/><path class="cls-1" d="M308.09,26.16H260.62c-.55.53-1.09,1.08-1.61,1.64s-1.15,1.29-1.69,2H308.4v-3.6Z"/><path class="cls-1" d="M302.92,123.06H272.09q1.76,1.77,3.64,3.6h23.59Z"/><path class="cls-1" d="M306.46,109q-2.06-1.85-3.94-3.6H257.4c.78,1.18,1.63,2.38,2.53,3.6Z"/><path class="cls-1" d="M294.11,131.86H281.32l2.16,1.93,1.9,1.67h5.13Z"/><path class="cls-1" d="M308.09,114.25H264c1,1.18,2,2.38,3.14,3.6h40.95l.27-.27v-3.33Z"/><path class="cls-1" d="M254.22,100.23h43q-1.81-1.85-3.4-3.6h-41.4C253,97.85,253.58,99.05,254.22,100.23Z"/><polygon class="cls-1" points="456.02 91.42 456.52 87.82 428.53 87.82 427.94 91.42 456.02 91.42"/><polygon class="cls-1" points="431.4 70.2 430.81 73.81 458.47 73.81 458.97 70.2 431.4 70.2"/><polygon class="cls-1" points="434.27 52.59 433.68 56.19 460.91 56.19 461.18 54.27 461.63 54.27 461.63 52.59 434.27 52.59"/><polygon class="cls-1" points="437.14 34.97 436.55 38.57 461.63 38.57 461.63 34.97 437.14 34.97"/><polygon class="cls-1" points="461.63 20.95 461.63 17.35 440.01 17.35 439.42 20.95 461.63 20.95"/><polygon class="cls-1" points="429.97 79.01 429.38 82.61 457.25 82.61 457.74 79.01 429.97 79.01"/><polygon class="cls-1" points="432.83 61.4 432.25 65 459.69 65 460.19 61.4 432.83 61.4"/><polygon class="cls-1" points="435.7 43.78 435.12 47.38 461.63 47.38 461.63 43.78 435.7 43.78"/><polygon class="cls-1" points="438.57 26.16 437.99 29.76 461.63 29.76 461.63 26.16 438.57 26.16"/><polygon class="cls-1" points="461.63 179.51 461.63 175.91 414.19 175.91 413.6 179.51 461.63 179.51"/><polygon class="cls-1" points="417.06 158.29 416.47 161.89 461.63 161.89 461.63 160.09 446.5 160.09 446.75 158.29 417.06 158.29"/><polygon class="cls-1" points="419.92 140.67 419.34 144.27 448.69 144.27 449.19 140.67 419.92 140.67"/><polygon class="cls-1" points="422.79 123.06 422.21 126.66 451.13 126.66 451.63 123.06 422.79 123.06"/><polygon class="cls-1" points="425.66 105.44 425.08 109.04 453.58 109.04 454.08 105.44 425.66 105.44"/><polygon class="cls-1" points="415.62 167.1 415.04 170.7 461.63 170.7 461.63 167.1 415.62 167.1"/><polygon class="cls-1" points="418.49 149.48 417.9 153.08 447.47 153.08 447.97 149.48 418.49 149.48"/><polygon class="cls-1" points="421.36 131.86 420.77 135.46 449.91 135.46 450.41 131.86 421.36 131.86"/><polygon class="cls-1" points="424.23 114.25 423.64 117.85 452.36 117.85 452.86 114.25 424.23 114.25"/><polygon class="cls-1" points="427.1 96.63 426.51 100.23 454.8 100.23 455.3 96.63 427.1 96.63"/><polygon class="cls-1" points="405.58 228.76 405.21 231.05 436.4 231.05 436.74 228.76 405.58 228.76"/><polygon class="cls-1" points="408.45 211.14 407.86 214.74 438.78 214.74 439.31 211.14 408.45 211.14"/><polygon class="cls-1" points="411.32 193.53 410.73 197.13 441.36 197.13 441.88 193.53 411.32 193.53"/><polygon class="cls-1" points="407.01 219.95 406.43 223.55 437.5 223.55 438.02 219.95 407.01 219.95"/><polygon class="cls-1" points="409.88 202.33 409.3 205.93 440.07 205.93 440.6 202.33 409.88 202.33"/><polygon class="cls-1" points="412.75 184.72 412.17 188.31 461.63 188.31 461.63 184.72 412.75 184.72"/><rect class="cls-1" x="572.96" y="34.97" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="17.35" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="43.78" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="26.16" width="13.46" height="3.6"/><rect class="cls-1" x="572.65" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="572.96" y="123.06" width="13.46" height="3.6"/><path class="cls-1" d="M573,108.71V109h13.46v-.54a35.82,35.82,0,0,1-3.83.21Z"/><rect class="cls-1" x="572.96" y="131.86" width="13.46" height="3.6"/><rect class="cls-1" x="572.96" y="114.25" width="13.46" height="3.6"/><rect class="cls-1" x="572.65" y="123.06" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="108.71" width="0.31" height="0.33"/><rect class="cls-1" x="572.65" y="131.86" width="0.31" height="3.6"/><rect class="cls-1" x="572.65" y="114.25" width="0.31" height="3.6"/><rect class="cls-1" x="536.71" y="87.82" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="70.21" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="52.59" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 34.97 536.71 34.97 536.71 38.57 572.35 38.57 572.65 38.57 572.65 34.97 572.35 34.97"/><polygon class="cls-1" points="572.35 20.95 572.65 20.95 572.65 17.35 572.35 17.35 536.71 17.35 536.71 20.95 572.35 20.95"/><rect class="cls-1" x="536.71" y="79.01" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="61.4" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 43.78 536.71 43.78 536.71 47.38 572.35 47.38 572.65 47.38 572.65 43.78 572.35 43.78"/><polygon class="cls-1" points="572.35 26.16 536.71 26.16 536.71 29.76 572.35 29.76 572.65 29.76 572.65 26.16 572.35 26.16"/><rect class="cls-1" x="536.71" y="175.91" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="158.29" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="140.67" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 123.06 536.71 123.06 536.71 126.66 572.35 126.66 572.65 126.66 572.65 123.06 572.35 123.06"/><polygon class="cls-1" points="570.36 108.71 570.36 105.44 536.71 105.44 536.71 109.04 572.35 109.04 572.65 109.04 572.65 108.71 570.36 108.71"/><rect class="cls-1" x="536.71" y="167.1" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="149.48" width="33.64" height="3.6"/><polygon class="cls-1" points="572.35 131.86 536.71 131.86 536.71 135.46 572.35 135.46 572.65 135.46 572.65 131.86 572.35 131.86"/><polygon class="cls-1" points="572.35 114.25 536.71 114.25 536.71 117.85 572.35 117.85 572.65 117.85 572.65 114.25 572.35 114.25"/><rect class="cls-1" x="536.71" y="96.63" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="228.76" width="33.64" height="2.29"/><rect class="cls-1" x="536.71" y="211.14" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="193.53" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="219.95" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="202.33" width="33.64" height="3.6"/><rect class="cls-1" x="536.71" y="184.72" width="33.64" height="3.6"/><rect class="cls-1" x="685.66" y="87.82" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="70.21" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="52.59" width="16.98" height="3.6"/><rect class="cls-1" x="661.05" y="34.97" width="41.6" height="3.6"/><rect class="cls-1" x="661.05" y="17.35" width="41.6" height="3.6"/><rect class="cls-1" x="685.66" y="79.01" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="61.4" width="16.98" height="3.6"/><rect class="cls-1" x="661.05" y="43.78" width="41.6" height="3.6"/><rect class="cls-1" x="661.05" y="26.16" width="41.6" height="3.6"/><rect class="cls-1" x="660.74" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="17.35" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="43.78" width="0.31" height="3.6"/><rect class="cls-1" x="660.74" y="26.16" width="0.31" height="3.6"/><rect class="cls-1" x="685.66" y="175.91" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="158.29" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="140.67" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="123.06" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="105.44" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="167.1" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="149.48" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="131.86" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="114.25" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="96.63" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="228.76" width="16.98" height="2.29"/><rect class="cls-1" x="685.66" y="211.14" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="193.53" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="219.95" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="202.33" width="16.98" height="3.6"/><rect class="cls-1" x="685.66" y="184.72" width="16.98" height="3.6"/><polygon class="cls-1" points="660.43 34.97 650.49 34.97 650.49 38.57 660.43 38.57 660.74 38.57 660.74 34.97 660.43 34.97"/><polygon class="cls-1" points="660.43 20.95 660.74 20.95 660.74 17.35 660.43 17.35 650.49 17.35 650.49 20.95 660.43 20.95"/><polygon class="cls-1" points="660.43 43.78 650.49 43.78 650.49 47.38 660.43 47.38 660.74 47.38 660.74 43.78 660.43 43.78"/><polygon class="cls-1" points="660.43 26.16 650.49 26.16 650.49 29.76 660.43 29.76 660.74 29.76 660.74 26.16 660.43 26.16"/><rect class="cls-1" x="770.69" y="87.82" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="70.21" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="52.59" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="34.97" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="17.35" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="79.01" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="61.4" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="43.78" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="26.16" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="175.91" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="158.29" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="140.67" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="123.06" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="105.44" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="167.1" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="149.48" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="131.86" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="114.25" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="96.63" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="228.76" width="16.37" height="2.29"/><rect class="cls-1" x="770.69" y="211.14" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="193.53" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="219.95" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="202.33" width="16.37" height="3.6"/><rect class="cls-1" x="770.69" y="184.72" width="16.37" height="3.6"/><path class="cls-1" d="M864.85,87.82H837.22v3.6h30.23Q866,89.56,864.85,87.82Z"/><path class="cls-1" d="M858.82,73.8c-.26-1.18-.47-2.38-.62-3.59h-21V73.8Z"/><rect class="cls-1" x="891.5" y="70.21" width="31.81" height="3.6"/><path class="cls-1" d="M889.16,52.59a20.25,20.25,0,0,1,1.3,3.6h32.16c-.16-1.23-.33-2.43-.53-3.6Z"/><path class="cls-1" d="M858.87,56.19a19.31,19.31,0,0,1,1.31-3.6h-23v3.6Z"/><path class="cls-1" d="M837.22,35v3.6h80.63c-.57-1.24-1.18-2.44-1.84-3.6Z"/><path class="cls-1" d="M902.79,21a42.22,42.22,0,0,0-7.25-3.6H852.86a43.19,43.19,0,0,0-7.42,3.6Z"/><path class="cls-1" d="M837.22,79v3.6h24.69a38,38,0,0,1-1.56-3.6Z"/><path class="cls-1" d="M857.86,65v0c0-1.26.06-2.43.15-3.57H837.22V65Z"/><path class="cls-1" d="M891.31,61.4c.1,1.14.16,2.33.18,3.6h31.78c0-1.22-.08-2.43-.16-3.6Z"/><path class="cls-1" d="M837.22,43.78v3.6H864.4q3.95-2.9,10.28-2.9a17,17,0,0,1,10.23,2.9H921c-.32-1.24-.69-2.43-1.08-3.6Z"/><path class="cls-1" d="M837.22,27.64v2.12h75.32c-.52-.67-1.06-1.32-1.62-2s-1-1.11-1.56-1.64H838.67C838.17,26.64,837.69,27.13,837.22,27.64Z"/><rect class="cls-1" x="836.91" y="87.82" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="70.21" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="52.59" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="34.97" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="79.01" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="61.4" width="0.31" height="3.6"/><rect class="cls-1" x="836.91" y="43.78" width="0.31" height="3.6"/><path class="cls-1" d="M837.06,27.8l-.15.17v1.79h.31V27.64Z"/><path class="cls-1" d="M869.08,140.67l.52.49.49-.49Z"/><path class="cls-1" d="M850.14,123.06q1.75,1.77,3.64,3.6h30.33l3.6-3.6Z"/><path class="cls-1" d="M837.22,105.44V108c.24.35.5.69.76,1h46.53q-2.06-1.85-3.94-3.6Z"/><path class="cls-1" d="M859.37,131.86l2.16,1.93,1.9,1.67H875.3l3.6-3.6Z"/><path class="cls-1" d="M845.23,117.85h47.69l.66-.66q-1.55-1.47-3.18-2.94H842.09C843.08,115.43,844.14,116.63,845.23,117.85Z"/><path class="cls-1" d="M837.22,96.63v3.6h38q-1.82-1.85-3.4-3.6Z"/><path class="cls-1" d="M836.91,105.44v2.13c.1.14.2.29.31.43v-2.56Z"/><rect class="cls-1" x="836.91" y="96.63" width="0.31" height="3.6"/><path class="cls-1" d="M836.61,87.82H827.1c.37,1.22.76,2.42,1.19,3.6h8.62v-3.6Z"/><path class="cls-1" d="M836.61,73.8h.3V70.21H824.28c0,1.21.11,2.41.21,3.59Z"/><path class="cls-1" d="M836.91,56.19v-3.6H825.43q-.31,1.75-.54,3.6h12Z"/><path class="cls-1" d="M836.61,35h-4.86c-.68,1.16-1.32,2.36-1.91,3.6h7.07V35Z"/><path class="cls-1" d="M836.61,79H825.12c.19,1.22.4,2.42.66,3.6h11.13V79Z"/><path class="cls-1" d="M836.61,65h.3V61.4H824.39c-.07,1.17-.12,2.38-.14,3.6Z"/><path class="cls-1" d="M836.61,43.78h-8.9c-.4,1.17-.78,2.37-1.11,3.6h10.31v-3.6Z"/><path class="cls-1" d="M835.37,29.76h1.54V28C836.38,28.55,835.87,29.15,835.37,29.76Z"/><path class="cls-1" d="M836.61,105.44h-1.16c.46.7.95,1.41,1.46,2.13v-2.13Z"/><path class="cls-1" d="M836.61,96.63h-6.16c.57,1.22,1.18,2.42,1.82,3.6h4.64v-3.6Z"/><rect class="cls-1" x="969.49" y="87.82" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="70.21" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="52.59" width="16.82" height="3.6"/><rect class="cls-1" x="934.32" y="34.97" width="52" height="3.6"/><rect class="cls-1" x="934.32" y="17.35" width="52" height="3.6"/><rect class="cls-1" x="969.49" y="79.01" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="61.4" width="16.82" height="3.6"/><rect class="cls-1" x="934.32" y="43.78" width="52" height="3.6"/><rect class="cls-1" x="934.32" y="26.16" width="52" height="3.6"/><rect class="cls-1" x="969.49" y="175.91" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="158.29" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="140.67" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="123.06" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="105.44" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="167.1" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="149.48" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="131.86" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="114.25" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="96.63" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="228.76" width="16.82" height="2.29"/><rect class="cls-1" x="969.49" y="211.14" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="193.53" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="219.95" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="202.33" width="16.82" height="3.6"/><rect class="cls-1" x="969.49" y="184.72" width="16.82" height="3.6"/></svg>  
<!-- <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1145.7 288.31"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#ff0d98;stroke-width:4.32px;}.cls-3{fill:#fff;}.cls-4{fill:url(#_10_lpi_60_2);}.cls-5{fill:url(#_10_lpi_60_2-3);}</style><pattern id="_10_lpi_60_2" data-name="10 lpi 60% 2" x="-66.36" y="-94.35" width="72" height="72" patternUnits="userSpaceOnUse" viewBox="0 0 72 72"><rect class="cls-1" width="72" height="72"/><line class="cls-2" x1="71.75" y1="68.4" x2="144.25" y2="68.4"/><line class="cls-2" x1="71.75" y1="54" x2="144.25" y2="54"/><line class="cls-2" x1="71.75" y1="39.6" x2="144.25" y2="39.6"/><line class="cls-2" x1="71.75" y1="25.2" x2="144.25" y2="25.2"/><line class="cls-2" x1="71.75" y1="10.8" x2="144.25" y2="10.8"/><line class="cls-2" x1="71.75" y1="61.2" x2="144.25" y2="61.2"/><line class="cls-2" x1="71.75" y1="46.8" x2="144.25" y2="46.8"/><line class="cls-2" x1="71.75" y1="32.4" x2="144.25" y2="32.4"/><line class="cls-2" x1="71.75" y1="18" x2="144.25" y2="18"/><line class="cls-2" x1="71.75" y1="3.6" x2="144.25" y2="3.6"/><line class="cls-2" x1="-0.25" y1="68.4" x2="72.25" y2="68.4"/><line class="cls-2" x1="-0.25" y1="54" x2="72.25" y2="54"/><line class="cls-2" x1="-0.25" y1="39.6" x2="72.25" y2="39.6"/><line class="cls-2" x1="-0.25" y1="25.2" x2="72.25" y2="25.2"/><line class="cls-2" x1="-0.25" y1="10.8" x2="72.25" y2="10.8"/><line class="cls-2" x1="-0.25" y1="61.2" x2="72.25" y2="61.2"/><line class="cls-2" x1="-0.25" y1="46.8" x2="72.25" y2="46.8"/><line class="cls-2" x1="-0.25" y1="32.4" x2="72.25" y2="32.4"/><line class="cls-2" x1="-0.25" y1="18" x2="72.25" y2="18"/><line class="cls-2" x1="-0.25" y1="3.6" x2="72.25" y2="3.6"/><line class="cls-2" x1="-72.25" y1="68.4" x2="0.25" y2="68.4"/><line class="cls-2" x1="-72.25" y1="54" x2="0.25" y2="54"/><line class="cls-2" x1="-72.25" y1="39.6" x2="0.25" y2="39.6"/><line class="cls-2" x1="-72.25" y1="25.2" x2="0.25" y2="25.2"/><line class="cls-2" x1="-72.25" y1="10.8" x2="0.25" y2="10.8"/><line class="cls-2" x1="-72.25" y1="61.2" x2="0.25" y2="61.2"/><line class="cls-2" x1="-72.25" y1="46.8" x2="0.25" y2="46.8"/><line class="cls-2" x1="-72.25" y1="32.4" x2="0.25" y2="32.4"/><line class="cls-2" x1="-72.25" y1="18" x2="0.25" y2="18"/><line class="cls-2" x1="-72.25" y1="3.6" x2="0.25" y2="3.6"/></pattern><pattern id="_10_lpi_60_2-3" data-name="10 lpi 60% 2" width="72" height="72" patternUnits="userSpaceOnUse" viewBox="0 0 72 72"><rect class="cls-1" width="72" height="72"/><line class="cls-2" x1="71.75" y1="68.4" x2="144.25" y2="68.4"/><line class="cls-2" x1="71.75" y1="54" x2="144.25" y2="54"/><line class="cls-2" x1="71.75" y1="39.6" x2="144.25" y2="39.6"/><line class="cls-2" x1="71.75" y1="25.2" x2="144.25" y2="25.2"/><line class="cls-2" x1="71.75" y1="10.8" x2="144.25" y2="10.8"/><line class="cls-2" x1="71.75" y1="61.2" x2="144.25" y2="61.2"/><line class="cls-2" x1="71.75" y1="46.8" x2="144.25" y2="46.8"/><line class="cls-2" x1="71.75" y1="32.4" x2="144.25" y2="32.4"/><line class="cls-2" x1="71.75" y1="18" x2="144.25" y2="18"/><line class="cls-2" x1="71.75" y1="3.6" x2="144.25" y2="3.6"/><line class="cls-2" x1="-0.25" y1="68.4" x2="72.25" y2="68.4"/><line class="cls-2" x1="-0.25" y1="54" x2="72.25" y2="54"/><line class="cls-2" x1="-0.25" y1="39.6" x2="72.25" y2="39.6"/><line class="cls-2" x1="-0.25" y1="25.2" x2="72.25" y2="25.2"/><line class="cls-2" x1="-0.25" y1="10.8" x2="72.25" y2="10.8"/><line class="cls-2" x1="-0.25" y1="61.2" x2="72.25" y2="61.2"/><line class="cls-2" x1="-0.25" y1="46.8" x2="72.25" y2="46.8"/><line class="cls-2" x1="-0.25" y1="32.4" x2="72.25" y2="32.4"/><line class="cls-2" x1="-0.25" y1="18" x2="72.25" y2="18"/><line class="cls-2" x1="-0.25" y1="3.6" x2="72.25" y2="3.6"/><line class="cls-2" x1="-72.25" y1="68.4" x2="0.25" y2="68.4"/><line class="cls-2" x1="-72.25" y1="54" x2="0.25" y2="54"/><line class="cls-2" x1="-72.25" y1="39.6" x2="0.25" y2="39.6"/><line class="cls-2" x1="-72.25" y1="25.2" x2="0.25" y2="25.2"/><line class="cls-2" x1="-72.25" y1="10.8" x2="0.25" y2="10.8"/><line class="cls-2" x1="-72.25" y1="61.2" x2="0.25" y2="61.2"/><line class="cls-2" x1="-72.25" y1="46.8" x2="0.25" y2="46.8"/><line class="cls-2" x1="-72.25" y1="32.4" x2="0.25" y2="32.4"/><line class="cls-2" x1="-72.25" y1="18" x2="0.25" y2="18"/><line class="cls-2" x1="-72.25" y1="3.6" x2="0.25" y2="3.6"/></pattern></defs><g id="Black"><path class="cls-3" d="M138.3,321.47V100.16H138V376.84h44.05V321.47Z" transform="translate(-66.36 -94.35)"/><path class="cls-3" d="M356.54,155a66.53,66.53,0,0,0-41.27-53.41q-17.68-7.26-39.91-7.26H275V141.2l.71,0q6.66,0,8.8,5.38t2.13,24.69V298.4q0,24.45-2.05,30.93t-9.4,6.5H275v46.83h.36q23.42,0,41-7.7t27.94-22a66.2,66.2,0,0,0,12.31-31.7q2-17.36,2-59.05V214.83Q358.59,172.11,356.54,155Z" transform="translate(-66.36 -94.35)"/><path class="cls-3" d="M509.79,100.16H460v66.77c.23-1.68.46-3.37.7-5.08q5.51,69.21,11,116.22H460v49h13.55l3.86,49.73h73.53Z" transform="translate(-66.36 -94.35)"/><path class="cls-3" d="M727.39,145a49.82,49.82,0,0,0-12-24.35q-9.57-10.94-27.94-15.72-12.69-3.3-41.49-4.33v47.67a16.63,16.63,0,0,1,5.17,1.69,11.42,11.42,0,0,1,5.47,7.77q1.18,5.31,1.19,24.1V289.34q0,27.69-3.58,33.93-2.1,3.63-8.25,5.15v48.42h7.9q25.82,0,38.63-2.82a50.69,50.69,0,0,0,21.53-9.91q8.72-7.08,12.22-19.65t3.5-49.82v-96.9Q729.78,158.44,727.39,145Z" transform="translate(-66.36 -94.35)"/><path class="cls-3" d="M756.61,270.89v106h71.95V198.94Z" transform="translate(-66.36 -94.35)"/><path class="cls-3" d="M958,100.16V376.84h60.09V100.16Z" transform="translate(-66.36 -94.35)"/><path class="cls-3" d="M1205.74,138.19q-6.33-17.86-27.18-30.85-20.22-12.6-50.56-13v46.83h.32q7.7,0,9.74,6t2,29.73V202h72v-12Q1212.06,156,1205.74,138.19Zm-77.93,90.14v42h14.52v32.81q0,19.31-2.82,26t-10.68,6.67l-.83,0v45.57a47.12,47.12,0,0,0,13.63-5.13q11.2-6.42,18.56-19.23l6.66,19.82h45.21V228.33Z" transform="translate(-66.36 -94.35)"/></g><g id="Lines"><rect class="cls-4" y="5.81" width="71.64" height="276.68"/><path class="cls-5" d="M264.08,171.25v129.2q0,24.1,2,29.74t8.95,5.64v46.83q-22-.06-39.54-7.27A66.49,66.49,0,0,1,194.19,322q-2.06-17.1-2.05-59.82V214.83q0-41.69,2-59a66.1,66.1,0,0,1,12.31-31.7q10.34-14.36,27.94-22T275,94.35V141.2a9.68,9.68,0,0,0-7.92,4.33Q264.08,149.89,264.08,171.25Z" transform="translate(-66.36 -94.35)"/><path class="cls-5" d="M460,166.93q-10.38,75.58-13.1,111.14H460v49H447.81l-4.32,49.73H369.1l36.7-276.68H460Z" transform="translate(-66.36 -94.35)"/><path class="cls-5" d="M635.11,147.5v182A46,46,0,0,0,646,328.42v48.42H563.16V100.16H617q16.11,0,29,.46v47.67A61.24,61.24,0,0,0,635.11,147.5Z" transform="translate(-66.36 -94.35)"/><polygon class="cls-4" points="762.2 5.81 762.2 104.59 690.25 176.54 690.25 5.81 762.2 5.81"/><polygon class="cls-4" points="891.64 5.81 891.64 282.49 888.67 282.49 851.24 156.71 851.24 282.49 791.08 282.49 791.08 5.81 851.24 5.81 891.57 130.4 891.57 5.81 891.64 5.81"/><path class="cls-5" d="M1116.87,172.62V305.41q0,18.63,2.39,24.52,2.25,5.55,8.74,5.88v45.57a61.42,61.42,0,0,1-12.79,1.28,68.71,68.71,0,0,1-34-8.81q-15.83-8.79-24-21.79A69,69,0,0,1,1047,324.81q-2.06-14.28-2-42.81V199.79q0-39.64,4.27-57.59t24.53-32.9q20.25-15,52.38-15h1.9v46.83q-6.4.1-8.74,5.11T1116.87,172.62Z" transform="translate(-66.36 -94.35)"/></g></svg> -->
</div>

CSS (SCSS) Code 

Create a file style.css and paste the code below.

.container{
  width: 100vw;
  height: 100vh;
  background: #232323;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg{
  fill:#F6EF03;
  fill:#00AEEF;
  fill: #fff;
  width: 40%;
}

rect{
  color: red;
}
.cls-1{
  fill:#FD07D6;
  animation: line-ani 2s ease forwards, fill 0.5s ease forwards infinite;
}
@keyframes line-ani{
    from{
        fill:#FD07D6;
    }
    to{
        fill:#000;
    }
}
// @keyframes line-ani{
//     from{
//         fill:#FD07D6;
//     }
//     to{
//         fill:#232323;
//     }
// }

JavaScript Code 

Create a file script.js and paste the code below.

var elemets = document.querySelector('svg').children;

anime({
  targets: '.cls-1',
  translateX: [
    {value: 270, duration: 1000, easing: 'easeOutSine'},
    {value: 0, duration: 1000, easing: 'easeOutSine'}
  ],
  delay: anime.stagger(200, {grid: [16,10], from: 7}),
  loop: true
})

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/kassandrasanch/pen/XWjLveE

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Tags
Share your love

Related Posts