Created
January 6, 2016 17:49
-
-
Save analogpixel/4da202f899f0dbf20134 to your computer and use it in GitHub Desktop.
Animating the SVG path
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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