SVG straight line animation CSS

Question

I am trying to achieve this (the picture below) in using SVG path for animation in a website. I saw this https://css-tricks.com/svg-line-animation-works/ and wanted to try it. But i am not sure how do i create the path out and the animation. Please do help me! Thanks

Ganesh Yadav · Accepted Answer · 2017-12-15T16:03:45.137

5

You can use svg code for animation. You can use CSS animation on svg paths.

.st0{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: draw1 4s linear forwards;
animation: draw1 4s linear forwards;
}
.st1{
fill:none;
stroke:#000000;
stroke-miterlimit:10;
stroke-dasharray: 200;
stroke-dashoffset: 200;
-webkit-animation: draw2 3s linear 2s forwards;
animation: draw2 3s linear 2s forwards;
}
  
@-webkit-keyframes draw1{
  to {stroke-dashoffset: 0;}
}
@keyframes draw1{
  to {stroke-dashoffset: 0;}
}
@-webkit-keyframes draw2{
  to {stroke-dashoffset: 0;}
}
@keyframes draw2{
  to {stroke-dashoffset: 0;}
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 614 53" style="enable-background:new 0 0 614 53;" xml:space="preserve">
<polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/>
<line class="st1" x1="307" y1="53" x2="307" y2="0"/>
</svg>

edited Dec 15 '17 at 16:03

answered Dec 14 '17 at 06:01

Ganesh Yadav

2,607
2
29
52

Not including the relevant part in your answer does not help. – ccprog Dec 14 '17 at 16:17
What do you mean by not including the relevant part? Questioner finds it helpful. – Ganesh Yadav Dec 15 '17 at 05:48
Your answer only makes sense when reading the fiddle. As a coutesy to future readers, instead of linking to an external resource, the answer should be understadable here. Including the CSS in your code example would have not been much effort. – ccprog Dec 15 '17 at 13:55
@ccprog, is it better now? – Ganesh Yadav Dec 15 '17 at 16:04

Alexandr_TT · Answer 2 · 2019-02-04T09:31:07.280

SVG solution

The animation uses the attribute <stroke-dashoffset> - the indent from the beginning of the line. At the maximum value of <stroke-dashoffset> the visible line is zero.
With the value of <stroke-dashoffset ="0"> the line acquires the maximum size.

It is necessary to accurately calculate the length of the line to avoid unpredictable effects in the animation.

In this example, the length of <line> is 53px, for <polyline> is 680px.

<style>
.st0{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 680; stroke-dashoffset: 680;} 
.st1{fill:none;stroke:#000000;stroke-miterlimit:10; stroke-dasharray: 53; stroke-dashoffset: 53;}  
 </style>
<svg version="1.1"  viewBox="0 0 614 53" >
 <polyline class="st0" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 " >
  <animate
    attributeName="stroke-dashoffset"
    from="680"
    to="0"
    dur="2s"
    fill="freeze" />
 </polyline>
<line class="st1" x1="307" y1="53" x2="307" y2="0">
    <animate
      attributeName="stroke-dashoffset"
      from="53"
      to="0"
      dur="2s"
      fill="freeze" />
</line>
 
</svg>

@lel Added the second solution is `SVG`. It's not always possible to solve animation tasks only with `CSS`, as in your example. — Alexandr_TT, Dec 14 '17 at 09:04

SVG straight line animation CSS

2 Answers2

SVG solution