CSS Discrepancy for animating svg paths - html

I'm currently trying out to animate some SVG paths and there is something I don't understand. I'm using the same CSS animation to animate 2 different paths (different length) but they don't finish at the same time. How can make them finish together independently of their length?
That's my code:
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
.path {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<body bgcolor="#000000">
<svg>
<path id="path1" class="path" stroke="#039EE3" stroke-width="1.8" fill="none" d="M10 10 H 190" />
<path id="path2" class="path" stroke="#039EE3" stroke-width="1.8" fill="none" d="M100 20 H 190 " />
</svg>
</body>

Related

HTML SVG reduce circle size

I have found animated circle made with svg but I need to reduce the circle size
How can I modify the code please?
#keyframes dash {
from {
stroke-dashoffset: 816;
}
to {
stroke-dashoffset: 0;
}
}
.progress-circle path {
stroke-dasharray: 816;
stroke-dashoffset: 0;
animation: dash 2s linear;
animation-delay: 0.3s;
}
<svg class="progress-circle" width="70" height="70">
<path
d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
stroke="#000" stroke-width="1" fill="transparent" />
</svg>

You need to change the width and height and then add the viewbox atrribute with the original size:
#keyframes dash {
from {
stroke-dashoffset: 816;
}
to {
stroke-dashoffset: 0;
}
}
.progress-circle path {
stroke-dasharray: 816;
stroke-dashoffset: 0;
animation: dash 2s linear;
animation-delay: 0.3s;
}
<svg class="progress-circle" width="30" height="30" viewBox="0 0 70 70">
<path
d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
stroke="#000" stroke-width="1" fill="transparent" />
</svg>

add viewBox= "0 0 50 50" in svg tag and reduce svgwidth and height

SVG arrow wrong sync animation

why doesn't the arrow start along with the line?
Is it not synchronized?
I would like the arrow to leave together with the line.
.box{
width:100%;
padding:0px;
background-color: black;
}
.squiggle {
stroke-dasharray: 498.181;
stroke-dashoffset: 498.181;
animation: draw 10s linear infinite;
}
#keyframes draw {
from {
stroke-dashoffset: 498.181;
}
to {
stroke-dashoffset: 0;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 215 66" preserveAspectRatio="xMidYMid meet">
<g id="layer1" transform="translate(-68.19229,10.180375)">
<g id="g38" transform="matrix(0.26458333,0,0,0.26458333,54.727655,-107.07271)">
<g>
<path id="path22" class="squiggle"
style="fill:none;
stroke:orange;
stroke-width:3px;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-opacity:1"
d="M 653.40952,459.58095 C 539.70759,242.15840999999995 379.43686,703.6978899999999 252.34286,526.62857"/>
<use href="#path22"/>
<path fill="red" d="M -9.5357143,-9.9107143 10,0 -10,10 -3.3928571,-0.17857143 Z">
<animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
<mpath href="#path22"/>
</animateMotion>
</path>
</g>
</g>
</g>
</svg>
</div>
</body>
</html>

look at this, This may be helpful:
#desc {
max-width: 700px;
margin-top: 100px;
color: #b3b3b3;
font-size: 11px;
font-family: sans-serif;
}
#desc li {
margin-bottom: 1em;
}
#desc p {
padding: 20px 0 0 40px;
}
#doubled-separate {
width: 110px;
}
#doubled-separate #over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 10s reveal linear infinite forwards;
}
#keyframes reveal {
50%, 100% {
stroke-dashoffset: 150;
}
}
#separate-marker {
width: 88px;
position: relative;
top:-4px;
}
#separate-marker .just-line {
fill: none;
stroke-dashoffset: 0;
animation: 10s reveal2 linear infinite forwards;
}
#keyframes reveal2 {
100% {
stroke-dashoffset: 150;
}
}
#doubled-separate-marker {
width: 110px;
}
#doubled-separate-marker .over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 3s reveal3 linear infinite forwards;
}
#keyframes reveal3 {
50%, 100% {
stroke-dashoffset: 150;
}
}
#doubled-separate-marker-2 {
width: 110px;
}
#doubled-separate-marker-2 #arrow3 path {
opacity: 0;
animation: 10s revealarrow linear infinite forwards;
}
#keyframes revealarrow {
0%, 50% {
opacity: 0;
}
60%, 100% {
opacity: 1;
}
}
#doubled-separate-marker-2 .over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 10s reveal4 linear infinite forwards;
}
#keyframes reveal4 {
50%, 100% {
stroke-dashoffset: 150;
}
}
#separate-marker-2 {
width: 88px;
position: relative;
top:-4px;
}
<svg viewBox="0 0 44 97" preserveAspectRatio="xMinYMin meet" id="separate-marker-2">
<defs>
<marker id="arrow4" viewBox="0 0 13 13" refX="11" refY="8" markerWidth="13" markerHeight="13" markerUnits="userSpaceOnUse" orient="auto-start-reverse" preserveAspectRatio="xMinYMin meet">
<path d="M3.66332316,0.125850427 L3.75090984,0.194245468 L12.2529105,7.89856961 C12.6592041,8.26674392 12.5414228,8.91869993 12.063138,9.1358919 L11.9627228,9.17332054 L0.963626457,12.4383634 C0.566538833,12.5562375 0.149079906,12.3298902 0.0312058479,11.9328025 C-0.0768453724,11.5688056 0.10434498,11.187691 0.441152309,11.0359066 L0.536766731,11.0003819 L10.2568836,8.11360225 L2.74367477,1.30576583 C2.46464034,1.05291103 2.41998014,0.63794112 2.62313708,0.333974789 L2.69153212,0.246388115 C2.94438692,-0.0326463148 3.35935683,-0.0773065179 3.66332316,0.125850427 L3.66332316,0.125850427 Z" fill="#B3B3B3" fill-rule="nonzero"></path>
</marker>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 1.000000)">
<path d="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" class="just-line" stroke="#B3B3B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4" marker-end="url(#arrow4)">
<animate attributeName="d" from="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" to="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C15.4626235,81.4917594 26.2993953,89.006995 41,91" dur="1.5s" repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
<div id="desc">
<ol>
<li>Line and arrowhead are two paths grouped together, with an identical (but wide and white) line path on top that animates to reveal.</li>
<li>Line path with arrowhead path attached as a marker. dash-offset animates on line path to add movement.</li>
<li>Fusion of 1 and 2. Line path with arrowhead as marker, white line path animating on top. Shows that path+marker connection is much smoother than path+path, and that butt linecaps create a smoother animation finish than square or round (although it required moving the white path start-point a step or two to cover the marker).</li>
<!-- figuring out CSS animation on an SVG marker was a JOURNEY -->
<li>Adaptation of 3. The arrowhead SVG marker has CSS animation applied. Since it doesn't appear until after the line path is fully visible, the white line path on top has a narrower stroke since it doesn't need to cover the marker. The animation timings are synced up via keyframe percentages.</li>
<li>native SVG animate!</li>
</ol>
<p>DISCLAIMER: honestly no idea about browser support for any of this</p>
</div>

CSS animation slowed down/do not complete after adding more sections to page

I am having trouble with CSS animations I added to a Webflow site in an Embed element. Before I added more sections to the page, the animations played a lot faster and the animation fully completed. Now after working on the site and adding more sections, the animations are slow and some do not complete.
Here is the embedded code I am using, if anyone could tell me why this is happening I would greatly appreciate the help :)
I am guessing the code is targeting the body? And that is why the animations got messed up when adding more sections?
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="height:64px;width:64px">
<path fill="none" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" d="M18 1h28v61L32 48 18 62z" stroke-dasharray="190,192"/>
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23 22l7 7 13-13" stroke-dasharray="29,31"/>
</svg>
<style>
selector {
property: value;
}
svg {
height: 100%;
width: 100%;
}
path {
stroke-dasharray: 300
;
animation: draw 2s normal;
}
#keyframes draw {
from {
stroke-dashoffset: 300
}
to {
stroke-dashoffset: 100%;
}
}
</style>
https://rova-roofing.webflow.io
icon animation section

What you are looking for is animation speed. Try this:
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="height:64px;width:64px">
<path fill="none" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" d="M18 1h28v61L32 48 18 62z" stroke-dasharray="190,192"/>
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23 22l7 7 13-13" stroke-dasharray="29,31"/>
</svg>
<style>
svg {
height: 100%;
width: 100%;
}
path {
stroke-dasharray: 300px;
;
animation: draw 5s normal; /*Change the speed right here*/
}
#keyframes draw {
from {
stroke-dashoffset: 300px;
}
to {
stroke-dashoffset: 100%;
}
}
</style>

A JQuery function for SVG, to execute 2nd animation as soon as, 1st animation completes?

I applied the animation-delay technique, but to achieve a the handwriting effect animation, I had to cut the object wherever it intersects, and drew a path and converted it to a clipping mask, e.g. letter "W" divided into 4 parts and drew different paths for different part for the said above, and animating it, to give a clean handwriting effect, giving path a stroke width, It took me a lot more time as the font was too complicated.
Currently I am achieving the said animation using animation-delay, CSS function.
CSS Code
#W2-Path {
animation-delay: .5s
}
#W3-Path {
animation-delay: 1s
}
#W4-Path {
animation-delay: 1.5s
}
#O-Path {
animation-delay: 2s
}
#R1-Path-2 {
animation-delay: 3.5s
}
#R2-Path-2 {
animation-delay: 4s
}
#R3-Path-2 {
animation-delay: 4.5s
}
#L1-Path-2 {
animation-delay: 5s
}
#L2-Path-2 {
animation-delay: 5.5s
}
#L3-Path-2 {
animation-delay: 6s
}
#D1-Path {
animation-delay: 6.5s
}
#D2-Path {
animation-delay: 7s
}
I was thinking if there is any other way through which I can start the 2nd animation as the 1st animation completes, and it just keeps going on giving the animation more smoother effect and perfect timing, implementing JQuery?
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
Original Question: How Can I Make SVG Text Animation Seamless And Accurate?
Linked Question 1: To Control SVG CSS Based Animation Using Jquery?
Linked Question 2: To Control The Speed Of Multiple SVG Elements Using Jquery?

I'm answering only for the latter W
I've changed the svg code you have, because it can be done in a more simple way.
You are wrapping every line in 2 groups. I'm using just the lines. Also you are using style="clip-path: url(#clip-path)" I've transformed this to a presentational attribute like so: clip-path="url(#clip-path)" because in javascript I want to set the animation-delay as inline style for the lines.
An other change: I'm using stroke-dasharray: 8 and stroke-dashoffset: 8 since 8 is the length of the lines for the letter W. I know the length of the lines because I've used the getTotalLength() method.
The stroke and the stroke-width are set only once for the group since the lines for the letter have the same style.
The javascript is selecting all the lines in a group and then is looping through the lines and setting the animation-delay:${i*1}s where i is the nth line. Please observe that the order of the lines in the group is from the first to the 4-th and not vice versa as you have them in your code.
let Wls = document.querySelector("#W").querySelectorAll("line");//all the lines in the W group
Wls.forEach((l,i)=>{
// for each line in the W group
// set the style attribute
l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
background: white;
}
svg {
width: 90vh;
border:solid;
}
#W line{
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
#keyframes letter-animation {
0% {
stroke-dashoffset: 8;
}
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 9 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
<path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
</clipPath>
<clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
<path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
<path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
</clipPath>
</defs>
<g id="W" stroke="#003668" stroke-width="2">
<line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
<line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
<line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
<line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
</g>
</svg>
UPDATE
The OP is commenting:
So when I was actually trying to implement it, I got on the letter "O", its a path not a line, I tried your method, its not appearing for path, what can be done for that any clue?
In this case you'll have to animate the path. This time you don't need a different css animation and since the final value for the stroke-dashoffset is 0 you don't need a different animation. However you'll need to calculate the path's total length to use it for the path's stroke-dasharray and stroke-dashoffse. In this case is 20.4.
let Wls = document.querySelector("#W").querySelectorAll("line")
Wls.forEach((l,i)=>{
l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
background: white;
}
svg {
width: 90vh;
border:solid;
overflow:visible;
}
#W line{
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
#O path{
stroke-dasharray: 20.4;
stroke-dashoffset: 20.4;
animation: letter-animation 1s linear forwards;
animation-delay:4.5s
}
#keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
#keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 29 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
<path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
</clipPath>
<clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
<path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
<path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
</clipPath>
<clipPath id="clip-path-43">
<path id="clipO" d="M22.38,14.637v.026h0v.081l0,.023a3.231,3.231,0,0,1-.367,1.385,3.556,3.556,0,0,1-.9,1.089,3.814,3.814,0,0,1-1.2.655,3.724,3.724,0,0,1-1.289.2,3.869,3.869,0,0,1-1.4-.3,3.818,3.818,0,0,1-1.169-.756,3.474,3.474,0,0,1-.791-1.133A3.228,3.228,0,0,1,15,14.763v-.119h0v-.022h0V14.6h0v-.047h0v-.024h0V14.38a3.256,3.256,0,0,1,.273-1.138,3.554,3.554,0,0,1,.756-1.109,3.749,3.749,0,0,1,2.8-1.073,4.05,4.05,0,0,1,1.265.257A3.668,3.668,0,0,1,21.241,12a3.433,3.433,0,0,1,.836,1.113,3.107,3.107,0,0,1,.3,1.237l0,.021v.131h0v.025h0v.025h0v.052h0v.025ZM21.265,14.4a3.982,3.982,0,0,0-.18-1.025,2.913,2.913,0,0,0-.529-.99,2.287,2.287,0,0,0-.821-.628,2.492,2.492,0,0,0-1.043-.218,2.667,2.667,0,0,0-1.038.2,2.42,2.42,0,0,0-.826.569,2.593,2.593,0,0,0-.549.905,3.436,3.436,0,0,0-.2,1.085v.232h0v.024h0V14.6h0v.024h0v.023h0v.025l0,.023v.027a3.52,3.52,0,0,0,.228,1.105,2.93,2.93,0,0,0,.615.98,2.5,2.5,0,0,0,1.778.762,2.549,2.549,0,0,0,1.023-.2,2.313,2.313,0,0,0,.811-.584,2.739,2.739,0,0,0,.534-.915,3.439,3.439,0,0,0,.188-1.021v-.185h0v-.044h0V14.6h0v-.022h0v-.022h0v-.022h0v-.022h0V14.4Z" />
</clipPath>
</defs>
<g id="W" stroke="#003668" stroke-width="2">
<line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
<line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
<line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
<line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
</g>
<g id="O" stroke="#003668" stroke-width="2" fill="none">
<path id="OPath" d="M18.657,11.3a3.1,3.1,0,0,0-2.289.981,3.448,3.448,0,0,0-.458,3.858,2.78,2.78,0,0,0,2.747,1.7,2.961,2.961,0,0,0,2.813-1.7,3.514,3.514,0,0,0-.458-3.858A3.055,3.055,0,0,0,18.657,11.3Z" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-43)" />
</g>
</svg>

SVG line animation

I am trying to use this trick to animate an svg picture:
http://css-tricks.com/svg-line-animation-works/
Here I created a codepen with my own version, but no matter what I do I can't seem to make it work. As far as I can see the only difference between my version and the one on css tricks is that I am using line elements instead of paths.
http://codepen.io/webconsult/pen/HgIsk
Additionally, can someone tell me how to accomplish this without using an inline svg?
CSS:
svg {
width: 100%;
}
svg .line {
stroke-dasharray: 1300;
animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1300;
}
to {
stroke-dashoffset: 0;
}
}
SVG:
<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"
width="1920px" height="640px" viewBox="0 0 1920 640" enable-background="new 0 0 1920 640" xml:space="preserve">
<line class="line" fill="none" stroke="#8FB6D0" stroke-miterlimit="10" x1="640" y1="482" x2="-1" y2="482"/>
<line class="line" fill="none" stroke="#8FB6D0" stroke-miterlimit="10" x1="640" y1="482" x2="-1" y2="482"/>
[...]
<line class="line" fill="none" stroke="#8FB6D0" stroke-miterlimit="10" x1="640" y1="482" x2="-1" y2="482"/>
</svg>

On chrome (or other), css animation needs to be written with vender prefix yet.
So, you should rewrite the code like this.
svg {
width: 100%;
}
svg .line {
stroke-dasharray: 1300;
animation: dash 5s linear alternate infinite;
-webkit-animation: dash 5s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1300;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1300;
}
to {
stroke-dashoffset: 0;
}
}