How to do line animation using CSS and SVG


Tags: javascript,css,svg

Problem :

My goal is to create scrolling lines similar to this site. I have started using a simple SVG shape to try and get it to work. I can do a simple animation, but not sure how to fill a specific color from start to finish.

My SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75px" height="100px" viewBox="0 -450 1230 1640" preserveAspectRatio="xMidYMid meet">
<path class="path" d="M131.2,-318.8a672.4,672.4,0,0,1,0,1344.8" stroke="black" id="e7_circleArc" style="fill: none; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-dasharray: 5px, 5px;" />

My CSS

.path {
  stroke-dasharray: 500;
  stroke-dashoffset: 5000;
  animation: dash 2s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

You can see the working fiddle here - https://jsfiddle.net/cbd9L2L3/



Solution :

I used the same method as the link you posted - animating the 'bottom' value of clip: rect() with jquery. With the difference that I went and used SVG shapes (one for the background and one for the one to be animated) Just a note that clip is apparently deprecated and has been replaced with clip-path. I tried with clip-path but couldn't achieve the same result.

Absolutely position both lines on top of one another if it's not obvious:

$('#line1-overlay').animate({
    fontSize: 515 //some unimportant CSS to animate so we get some values - and height of the line
}, {
    duration: 2000,
    step: function (now, fx) { //now is the animated value from initial css value
      $(this).css('clip', 'rect(0px, 217px, ' + now + 'px, 0px)')
    }
});
.line-container {
  position: relative;
}

.line {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="line-container">

  <svg version="1.1" class="line" id="line1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve">
  <path fill="#FFFFFF" stroke="#CCCCCC" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203
    c-13,63-152,60-186,118c-34,58,61,159,130,177"/>
  </svg>

  <svg version="1.1" class="line" id="line1-overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve">
  <path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203
    c-13,63-152,60-186,118c-34,58,61,159,130,177"/>
  </svg>

</div>

Also: JSFiddle DEMO

Thanks partly to this answer.


    CSS Howto..

    How do I make an image resize inside a div that is resizing to a percentage of a parent div?

    How to center vertically and horizontally a heading text using flask-bootstrap

    How to inline the contents of an entire stylesheet with Wordpress?

    How to hide element label by element id in CSS?

    How to define SVG gradient in page-global CSS file

    How to always center a flexible square in viewport with pure CSS?

    How can I hide a div when content is not displayed

    how to dynamically move list items inside a DIV to get proper arrangement?

    How to have menu items streched in full width menu with css for any screen automatically

    How to do not apply CSS on a specific TAG

    How to add left margin and wrap long lines in code tag

    How to make dynamic slideshow using php, mysql, css and html?

    How do I make entire div a link? [duplicate]

    Responsive portrait images, Hows & Dont's?

    How can I make the ul contain li in its content box?

    How to enlarge an image horizontally in css?

    How to check if a TR contains a TD with a specific CSS class with jquery?

    How to modify the font family within bootstrap

    html / css / pre / code: how to force carriage return

    How do I take code from Codepen, and use it locally?

    How to select Bootstrap's collapsed menu button with CSS

    How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

    How to: mob-responsive menu that will always have a height:100% and show all
  • s although the body gets position:fixed when the list is displayed
  • how to align divs with different width within another parent div?

    How can I align unsorted list horizontly ?

    How to apply css class for selected element in jquery or javascript?

    How do you create and run an html page directly from LocalStorage?

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    PNG background image not showing in IE 8< using html5?

    How to represent dual-cell format in CSS?