SVG Loader with Source Code

Animated SVG loader Using Html Css JS With free Source Code.

Animated SVG loader Using Html Css JS With free Source Code.

HTML

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

</div>

CSS

body {
  font-family: "Lato", sans-serif;
}

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

svg {
  fill: #f6ef03;
  fill: #00aeef;
  fill: #fff;
  fill: #000;
  width: 50%;
}

.cls-1 {
  fill: #000;
}

JAVASCRIPT

// excuse the mess, i am still playing around. :)

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

let lines = document.querySelectorAll(".cls-1");
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
});

// var tl = gsap.timeline({delay: 1, repeat: -1, yoyo: true});

// tl.from('.cls-1', {
//   x: '300px',
//   // duration: .05,
//   stagger:.02,
//   duration: 1,
//   opacity: 0,
//   // fill: "yellow"
// })
// tl.to('.cls-1', {
//   // fill:'yellow',
//   duration: 1,

// }, '<')

// let colors = ['#4cc9f0', '#4895ef', '#4361ee', '#3f37c9', '#3a0ca3'];

let colors = ["#FFFFFF", "#ECE9E6"];

// let colors = ['#4cc9f0', '#4895ef', '#4361ee', '#3f37c9', '#3a0ca3', "orange"];

// let colors = ['#00377e', '#002d67',"#002657"]

// function getRandomInt(max) {
//   return Math.floor(Math.random() * Math.floor(max));

// }

var intervalID = window.setInterval(myCallback, 500);

// function myCallback() {
//   lines.forEach((element) => {
//   let newColor = colors[getRandomInt(colors.length)]
//     $( element ).css( "fill", newColor );
//   });
// }

Thank You!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games