Skip to content

Instantly share code, notes, and snippets.

@analogpixel

analogpixel/svgPathAnimation.html

Created January 6, 2016 17:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save analogpixel/4da202f899f0dbf20134 to your computer and use it in GitHub Desktop.
Save analogpixel/4da202f899f0dbf20134 to your computer and use it in GitHub Desktop.
Download ZIP
Animating the SVG path
Raw
svgPathAnimation.html
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background: #5B618A;
}
.box {
margin-left: auto;
margin-right: auto;
width: 120px;
height: 100vh;
background-color: #D6D84F;
transition: width 1s, height 1s;
box-shadow: 5px 5px 5px #5B507A;
}
.path {
transition-timing-function: ease;
transition: stroke-dashoffset 3s, opacity 1s;
}
svg {
position: relative;
width: 150px;
height: 500px;
top: 50%;
left: 13px;
margin-left: auto;
margin-right: auto;
transform: scale(1,1);
}
</style>
<script>
var count = 3;
var paths = [
"m 92.568359,69.609116 q 0,35.244144 -11.074218,51.767574 -10.986329,16.43555 -34.189454,16.43555 -23.554687,0 -34.453124,-16.69922 Q 2.0410156,104.4138 2.0410156,69.784897 q 0,-34.892578 10.9863284,-51.503906 10.986328,-16.6992191 34.277343,-16.6992191 23.554688,0 34.365235,16.9628901 10.898437,16.875 10.898437,51.064454 z M 69.453125,109.51146 q 3.076172,-7.11914 4.130859,-16.699219 1.142578,-9.667969 1.142578,-23.203125 0,-13.359375 -1.142578,-23.203125 -1.054687,-9.84375 -4.21875,-16.699219 -3.076172,-6.767578 -8.4375,-10.195313 -5.273437,-3.427734 -13.623047,-3.427734 -8.261718,0 -13.710937,3.427734 -5.361328,3.427735 -8.525391,10.371094 -2.988281,6.503906 -4.130859,16.962891 -1.054688,10.458984 -1.054688,22.939453 0,13.710937 0.966797,22.939453 0.966797,9.22852 4.13086,16.52344 2.90039,6.85547 8.173828,10.45898 5.361328,3.60352 14.15039,3.60352 8.261719,0 13.710938,-3.42774 5.449219,-3.42773 8.4375,-10.37109 z",
"m 81.068033,74.105804 q 4.21875,3.779297 6.94336,9.492188 2.724609,5.712891 2.724609,14.765625 0,8.964843 -3.251953,16.435543 -3.251953,7.47071 -9.140625,13.00782 -6.591797,6.15234 -15.556641,9.14062 -8.876953,2.90039 -19.511719,2.90039 -10.898437,0 -21.445312,-2.63672 -10.546875,-2.54882 -17.3144532,-5.625 l 0,-18.36914 1.3183594,0 q 7.4707028,4.92188 17.5781248,8.17383 10.107422,3.25195 19.511719,3.25195 5.537109,0 11.777344,-1.8457 6.240234,-1.8457 10.107422,-5.44922 4.042968,-3.86719 5.976562,-8.52539 2.021484,-4.6582 2.021484,-11.777342 0,-7.03125 -2.285156,-11.601563 -2.197265,-4.658203 -6.152344,-7.294922 -3.955078,-2.724609 -9.580078,-3.691406 -5.625,-1.054688 -12.128906,-1.054688 l -7.910156,0 0,-14.589843 6.152344,0 q 13.359375,0 21.269531,-5.53711 7.998047,-5.625 7.998047,-16.347656 0,-4.746094 -2.021485,-8.261719 -2.021484,-3.603515 -5.625,-5.888672 -3.779297,-2.285156 -8.085937,-3.164062 -4.306641,-0.878906 -9.75586,-0.878906 -8.349609,0 -17.753906,2.988281 -9.404297,2.988281 -17.753906,8.4375 l -0.8789063,0 0,-18.369141 Q 14.53483,8.7151794 24.905924,6.1663513 35.364908,3.5296325 45.120768,3.5296325 q 9.580078,0 16.875,1.7578126 7.294921,1.7578125 13.183593,5.6249999 6.328125,4.21875 9.580078,10.195313 3.251954,5.976562 3.251954,13.974609 0,10.898437 -7.734375,19.072266 -7.646485,8.085937 -18.105469,10.195312 l 0,1.230469 q 4.21875,0.703125 9.667969,2.988281 5.449218,2.197266 9.228515,5.537109 z",
"m 94.59652,94.69252 q 0,19.95117 -13.183593,32.60742 -13.095703,12.56836 -32.167969,12.56836 -9.667969,0 -17.578125,-2.98828 -7.910156,-2.98828 -13.974609,-8.87695 Q 10.13363,120.70815 6.0027704,108.66713 1.9598017,96.626114 1.9598017,79.663223 q 0,-17.402343 3.6914062,-30.849609 3.7792969,-13.447266 11.9531251,-23.90625 7.734375,-9.931641 19.951172,-15.4687501 12.216797,-5.625 28.476562,-5.625 5.185547,0 8.701172,0.4394531 3.515625,0.4394531 7.119141,1.5820313 l 0,16.7871097 -0.878906,0 q -2.460938,-1.31836 -7.470704,-2.460938 -4.921875,-1.230469 -10.107421,-1.230469 -18.896485,0 -30.146485,11.865235 -11.25,11.777344 -13.095703,31.904297 7.382813,-4.482422 14.501953,-6.767578 7.207031,-2.373047 16.611328,-2.373047 8.34961,0 14.677735,1.582031 6.416015,1.494141 13.095703,6.152344 7.734375,5.361328 11.601562,13.535156 3.955078,8.173828 3.955078,19.863281 z m -17.841796,0.703125 q 0,-8.173828 -2.460938,-13.535156 -2.373047,-5.361328 -7.910156,-9.316406 -4.042969,-2.8125 -8.964844,-3.691407 -4.921875,-0.878906 -10.283203,-0.878906 -7.470703,0 -13.886719,1.757813 -6.416015,1.757812 -13.183594,5.449218 -0.175781,1.933594 -0.263671,3.779297 -0.08789,1.757813 -0.08789,4.482422 0,13.886719 2.8125,21.97266 2.900391,7.99804 7.910156,12.65625 4.042969,3.86718 8.701172,5.71289 4.746094,1.75781 10.283203,1.75781 12.744141,0 20.039063,-7.73438 7.294922,-7.82226 7.294922,-22.412105 z",
"m 93.282645,61.072556 q 0,17.138671 -3.955078,31.113281 -3.867187,13.974613 -11.777344,23.818363 -7.998047,10.01953 -20.039062,15.46875 -12.041016,5.44921 -28.300781,5.44921 -4.570313,0 -8.613282,-0.52734 -4.042968,-0.43945 -7.207031,-1.49414 l 0,-16.78711 0.878906,0 q 2.548828,1.31836 7.207032,2.54883 4.658203,1.14258 10.371093,1.14258 19.423828,0 30.410157,-11.60157 11.074218,-11.689448 12.832031,-32.167964 -8.173828,4.921875 -15.38086,7.03125 -7.207031,2.109375 -15.732421,2.109375 -8.085938,0 -14.677735,-1.582031 Q 22.794364,84.012009 16.202567,79.441696 8.4681921,74.080368 4.513114,65.818649 0.64592648,57.556931 0.64592648,46.043259 q 0,-20.039063 13.18359352,-32.607422 13.183594,-12.56835958 32.167969,-12.56835958 9.492187,0 17.578125,2.98828128 8.085937,2.9003906 14.150391,8.7890623 7.470703,7.294922 11.513671,18.808594 4.042969,11.425781 4.042969,29.619141 z M 75.528739,57.293259 q 0,-13.623047 -2.8125,-21.884766 -2.8125,-8.261719 -7.734375,-12.832031 -4.130859,-3.955078 -8.876953,-5.625 -4.746094,-1.757813 -10.283203,-1.757813 -12.65625,0 -20.039063,7.910157 -7.294922,7.910156 -7.294922,22.236328 0,8.349609 2.373047,13.623047 2.373047,5.273437 7.998047,9.228515 3.955078,2.72461 8.701172,3.691406 4.746094,0.878907 10.546875,0.878907 6.855469,0 13.886719,-1.845703 7.03125,-1.845704 13.183593,-5.361329 0.08789,-1.845703 0.175782,-3.603515 0.175781,-1.845703 0.175781,-4.658203 z"
];
</script>
</head>
<body>
<div id="b1" class="box" >
<svg>
<path class="path" id="p1" path="path" stroke="#5B507A" stroke-width="4" fill="#D6D84F"" d=""></path>
</svg>
</div>
<script>
function cleanup() {
document.getElementById('p1').style.visibility = 'hidden';
document.getElementById('b1').style.width = '0px';;
}
function updateCounter() {
var p1 = document.getElementById('p1');
p1.classList.remove('path');
// set the path to the next number. Each path was created in inkscape
// using the text tool, then select the number and hit shift-ctrl-c (object to path)
// then type shift-ctrl-x to pull up the xml editor
// double click on the path, and look in the xml editor for the d value
// copy that d value, as that is your path variable
p1.setAttribute('d', paths[count]);
// next we set each dash on the dashed line to the entire length
// of the path, and set the offset of the dash to 0. This makes the
// entire path look stroked.
p1.setAttribute('stroke-dasharray', p1.getTotalLength() );
p1.setAttribute('stroke-dashoffset',0 );
// I set the opacity to 0, so I can change it to 100 and have the
// css transition kick in and have the number fade in
p1.setAttribute('opacity',0 );
// used to force a re-triggering of the css animation
p1.offsetWidth = p1.offsetWidth;
// add the class back that has our animation
p1.classList.add('path');
// set the offset so the animation kicks off on this, and slowly
// over three seconds redraws the path
p1.setAttribute('stroke-dashoffset', p1.getTotalLength() );
// fade the character in
p1.setAttribute('opacity',100 );
// count down, and when done erase the holding box
count--;
if (count <= 0) {
setTimeout(cleanup, 3000);
} else {
setTimeout(updateCounter, 3000);
}
}
// start the entire thing
updateCounter();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment