SVG/CSS: Pretty Cool Way To Animate Drawing Lines

A-Pretty-Cool-Way-To-Animate-Drawing-SVG-Lines.markdown

SVG/CSS: Pretty Cool Way To Animate Drawing Lines

Originally got this from this codepen http://codepen.io/netsi1964/pen/iyglK and then just adapted it to make it really simple. I used Inkscape for the SVG & literally just drew a couple of shapes and then opened up the SVG using a text editor. Everyting in the SVG was then just pasted in where the code below shows "<svg class="" etc., I just kept the class name. You can hide the intial strokes by making the width 0 in the raw SVG.

Check it out on this Codepen

index.html

<div class="container fluid">
  <div class="row">
    <h1>SVG/CSS: Pretty cool way to animate drawing lines</h1>
    
    <div class="span8"><blockquote>Originally got this from this codepen <a href="http://codepen.io/netsi1964/pen/iyglK">http://codepen.io/netsi1964/pen/iyglK</a> and then just adapted it to make it really simple. I used Inkscape for the SVG & literally just drew a couple of shapes and then opened up the SVG using a text editor. Everyting in the SVG was then just pasted in where the code below shows "&lt;svg class=" etc., I just kept the class name. You can hide the intial strokes by making the width 0 in the raw SVG.</blockquote></div>
    <div class="span4"><h3>Move your mouse around below to see the effect</h3></div>
  </div>
  <div class="row"><div class="span12">
 <svg class="squiggle-animated"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448819"
   height="1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="New document 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="404.66625"
     inkscape:cy="721.04164"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="987"
     inkscape:window-height="736"
     inkscape:window-x="78"
     inkscape:window-y="78"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 118.57143,93.790754 0,302.857146 180,0 -1.42857,-302.857146 z"
       id="path2985"
       inkscape:connector-curvature="0" />
    <path
       sodipodi:type="arc"
       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="path2987"
       sodipodi:cx="152.14285"
       sodipodi:cy="130.21933"
       sodipodi:rx="17.857143"
       sodipodi:ry="19.285715"
       d="m 169.14772,124.33238 a 17.857143,19.285715 0 1 1 -1.03922,-2.75141"
       sodipodi:start="5.972985"
       sodipodi:end="12.101939"
       sodipodi:open="true" />
    <path
       style="fill:none;stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 138.57143,155.21933 145.71428,0 -1.42857,48.57142 -147.14285,-1.42857 z"
       id="path2989"
       inkscape:connector-curvature="0" />
  </g>
</svg>
 
   
  </div></div>
</div>

script.js

function simulatePathDrawing(path) {
  // var path = document.querySelector('.squiggle-animated path');
  var length = path.getTotalLength();
  // Clear any previous transition
  path.style.transition = path.style.WebkitTransition =
  'none';
  // Set up the starting positions
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  path.getBoundingClientRect();
  // Define our transition
  path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 1.5s ease-in-out';
  // Go!
  path.style.strokeDashoffset = '0';
  path.style.strokeWidth = '3px';
  path.style.fill = 'rgba(255,255,255,.0)';
}
 
var chars = $('.squiggle-animated path').on('mouseover', function(e) {
  simulatePathDrawing(path2985);
  simulatePathDrawing(path2987);
  simulatePathDrawing(path2989);
})

style.css

.span4 {
  background-color: rgba(255,255,0,.1);
  border-radius: 1px;
}
.span4 h3 {
  margin: 10px;
  line-height: 105%;
}