Skip to content

Instantly share code, notes, and snippets.

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 bilalqtech/df354a999d0ff5bdc6b463aff88ffe53 to your computer and use it in GitHub Desktop.
Save bilalqtech/df354a999d0ff5bdc6b463aff88ffe53 to your computer and use it in GitHub Desktop.
Linked Letter Writing w/ SVG (JS)
var strokes = [],
paths = document.getElementsByTagName("path"),
j = 0;
for (let i = 0; i < paths.length; i++) {
strokes[i] = paths[i].getTotalLength();
paths[i].style.strokeDashoffset = paths[i].getTotalLength();
paths[i].style.strokeDasharray = paths[i].getTotalLength();
}
function strokeLetter(letter, pathDist) {
letter.animate([
{ strokeDashoffset: pathDist },
{ strokeDashoffset: '0' }
], {
duration: pathDist * 7,
fill: 'forwards'
}).onfinish = function() {
j++;
strokeLetter(paths[j], paths[j].getTotalLength());
}
}
strokeLetter(paths[0], strokes[0]);
Source: http://codepen.io/dudleystorey/pen/PmerJG
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment