Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save simsam7/8527383 to your computer and use it in GitHub Desktop.
Save simsam7/8527383 to your computer and use it in GitHub Desktop.
SVG/CSS: Pretty Cool Way To Animate Drawing Lines

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

<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>
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);
})
.span4 {
background-color: rgba(255,255,0,.1);
border-radius: 1px;
}
.span4 h3 {
margin: 10px;
line-height: 105%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment