Draw SVG line from left to right

user_11736038 0
Viewed 344

I encountered a problem with SVG animation. I need to animate SVG as if it is been drawn from left to right see the SVG

Is it possible to do it like that? SVG code is below in case you need it

<svg width="1920" height="399" viewBox="0 0 1920 399" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="969" cy="209" r="189" stroke="black" stroke-width="2"/>
<circle cx="529" cy="209" r="189" stroke="black" stroke-width="2"/>
<circle cx="1409" cy="209" r="189" stroke="black" stroke-width="2"/>
<path d="M0 192C156.295 128.885 480.909 6.14397 529 20.0956" stroke="black" stroke-width="2"/>
<path d="M1920 190C1765.48 127.615 1444.55 6.2926 1397 20.083" stroke="black" stroke-width="2"/>
<path d="M488 26C574.756 7.13441 802.014 -19.2774 1017 26" stroke="black" stroke-width="2"/>
<path d="M922 26C1008.76 7.13441 1236.01 -19.2774 1451 26" stroke="black" stroke-width="2"/>
</svg>

I'm trying to do the animation with the SVG Artista service. I've already tried to merge all paths and circles into 1 path, that didn't help.

Thanks in advance!

Update:

I was asked to add one path code that I got, here it is:

<svg width="100%" height="399" viewBox="0 0 1920 399" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1220,209a189,189 0 1,0 378,0a189,189 0 1,0 -378,0 M340,209a189,189 0 1,0 378,0a189,189 0 1,0 -378,0 M780,209a189,189 0 1,0 378,0a189,189 0 1,0 -378,0 M0 192C156.295 128.885 480.909 6.14397 529 20.0956 M1920 190C1765.48 127.615 1444.55 6.2926 1397 20.083 M488 26C574.756 7.13441 802.014 -19.2774 1017 26 M922 26C1008.76 7.13441 1236.01 -19.2774 1451 26" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

animation svg html
1 Answers

The maximum path length is 5554px To animate the growth of a line, use the attribute stroke-dasharray

The animation starts after clicking on the canvas SVG

.container {
width:75vw;
height:75vw;
}
#move_path {
fill:none;
stroke:black;
stroke-width:2;
stroke-dasharray: 0,5554;
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1920 399" fill="none" version="1.1">

  <path id="move_path"  d="m0 192c0 0 156.5-61.7 235.7-90.1 57.1-20.5 114.2-41.7 172.6-58.1 33.9-9.5 67.7-22.7 102.9-23.2 34.9-0.5 71.7 4.2 102.9 19.9 32.9 16.6 63.3 42.6 81.3 74.7 19.6 34.9 27.3 78 23.2 117.8-3.2 31.9-17.4 63.5-37.1 88.8-19.4 25-47.3 43.4-75.8 57.2-23.7 11.5-50 19.9-76.3 19.9-30.9 0-62.2-9-89.6-23.2-25.8-13.4-49.8-32.6-66.4-56.4-19.2-27.6-32.8-61.1-34.9-94.6-2.4-38.6 6.6-79.8 26.6-112.9 20.8-34.6 54.7-62.6 91.3-79.7 36-16.8 78.4-13.2 117.8-18.3 33.1-4.2 66.3-7.7 99.6-10 30.4-2.1 60.8-3.4 91.3-3.3 28.8 0 57.6 1.7 86.3 3.3 29.4 1.7 58.8 2.7 88 6.6C965.5 14.2 992.1 17.4 1017 26c25.3 8.7 51.1 19.1 71.8 36.1 22.2 18.2 42.5 41.3 53.1 68 15 37.7 19.8 81.4 11.6 121.2-6.9 34-26.2 65.9-49.8 91.3-17.9 19.4-41.2 35.1-66.4 43.2-38 12.1-80.6 13.9-119.5 5-26.3-6-50.9-20.5-71.2-38.3-25-22-47.6-49.7-58.3-81.2-11.7-34.6-11.7-74-3.3-109.5 7.2-30.6 23.8-59.6 44.8-83 18.8-21 40-34.1 69.7-48.1 17.6-8.3 78.6-17.2 118.3-20.5 43.2-3.6 78.2-8.1 117.4-9.4 34.8-1.1 69.7 0.3 104.6 1.7 34.3 1.4 68.7 2.9 102.9 6.6C1379 13 1416.3 14.6 1451 26c31.8 10.4 66.5 21.5 89.2 46 33.7 36.4 56.1 87.4 57.8 137 1.4 40.6-14.9 83-39.5 115.3-23.9 31.3-60.1 55.4-97.9 66.4-36.1 10.5-77.2 8.8-112.9-3.3-34.9-11.9-66.2-36.2-89.6-64.7-18.5-22.6-31.8-50.8-36.5-79.7-5.9-36.2-2.3-75.6 11.6-109.5 11.3-27.6 32.6-51.1 55.6-70.1 18.1-15 39.6-26.7 62.3-32.8C1383.2 21.8 1417.9 22 1451 26c38.8 4.6 75.2 21 112.4 32.8 55.2 17.5 109.8 36.9 164.3 56.4 41.7 15 83.3 30.3 124.5 46.6C1875 170.8 1920 190 1920 190" >
    <animate attributeName="stroke-dasharray" begin="svg1.click" dur="10s" values="0,5554;5554,0" fill="freeze" />
  </path>
</svg>
</div>

CSS animation

.container {
width:75vw;
height:75vw;
}
#move_path {
fill:none;
stroke:black;
stroke-width:2;
stroke-dasharray: 0,5554;
animation: draw 10s forwards;
}
@keyframes draw {
to{stroke-dasharray:5554,0}
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1920 399" fill="none" version="1.1">

  <path id="move_path"  d="m0 192c0 0 156.5-61.7 235.7-90.1 57.1-20.5 114.2-41.7 172.6-58.1 33.9-9.5 67.7-22.7 102.9-23.2 34.9-0.5 71.7 4.2 102.9 19.9 32.9 16.6 63.3 42.6 81.3 74.7 19.6 34.9 27.3 78 23.2 117.8-3.2 31.9-17.4 63.5-37.1 88.8-19.4 25-47.3 43.4-75.8 57.2-23.7 11.5-50 19.9-76.3 19.9-30.9 0-62.2-9-89.6-23.2-25.8-13.4-49.8-32.6-66.4-56.4-19.2-27.6-32.8-61.1-34.9-94.6-2.4-38.6 6.6-79.8 26.6-112.9 20.8-34.6 54.7-62.6 91.3-79.7 36-16.8 78.4-13.2 117.8-18.3 33.1-4.2 66.3-7.7 99.6-10 30.4-2.1 60.8-3.4 91.3-3.3 28.8 0 57.6 1.7 86.3 3.3 29.4 1.7 58.8 2.7 88 6.6C965.5 14.2 992.1 17.4 1017 26c25.3 8.7 51.1 19.1 71.8 36.1 22.2 18.2 42.5 41.3 53.1 68 15 37.7 19.8 81.4 11.6 121.2-6.9 34-26.2 65.9-49.8 91.3-17.9 19.4-41.2 35.1-66.4 43.2-38 12.1-80.6 13.9-119.5 5-26.3-6-50.9-20.5-71.2-38.3-25-22-47.6-49.7-58.3-81.2-11.7-34.6-11.7-74-3.3-109.5 7.2-30.6 23.8-59.6 44.8-83 18.8-21 40-34.1 69.7-48.1 17.6-8.3 78.6-17.2 118.3-20.5 43.2-3.6 78.2-8.1 117.4-9.4 34.8-1.1 69.7 0.3 104.6 1.7 34.3 1.4 68.7 2.9 102.9 6.6C1379 13 1416.3 14.6 1451 26c31.8 10.4 66.5 21.5 89.2 46 33.7 36.4 56.1 87.4 57.8 137 1.4 40.6-14.9 83-39.5 115.3-23.9 31.3-60.1 55.4-97.9 66.4-36.1 10.5-77.2 8.8-112.9-3.3-34.9-11.9-66.2-36.2-89.6-64.7-18.5-22.6-31.8-50.8-36.5-79.7-5.9-36.2-2.3-75.6 11.6-109.5 11.3-27.6 32.6-51.1 55.6-70.1 18.1-15 39.6-26.7 62.3-32.8C1383.2 21.8 1417.9 22 1451 26c38.8 4.6 75.2 21 112.4 32.8 55.2 17.5 109.8 36.9 164.3 56.4 41.7 15 83.3 30.3 124.5 46.6C1875 170.8 1920 190 1920 190" >
    <!-- <animate attributeName="stroke-dasharray" begin="svg1.click" dur="10s" values="0,5554;5554,0" fill="freeze" /> -->
  </path>
</svg>
</div>

user_73948710
Related