Skip to content

Instantly share code, notes, and snippets.

@joyrexus
Last active August 13, 2018 14:20
Show Gist options
  • Save joyrexus/6925840 to your computer and use it in GitHub Desktop.
Save joyrexus/6925840 to your computer and use it in GitHub Desktop.
Animated paths

Animated path drawing/erasing.

See Jake Archibald's article for more details.

path = document.querySelector('path')
length = path.getTotalLength()
# clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none'
# set starting positions
path.style.strokeDasharray = "#{length} #{length}"
path.style.strokeDashoffset = length
# trigger a layout so styles are calculated
path.getBoundingClientRect()
path.style.transition = 'stroke-dashoffset 2s ease-in-out'
drawn = false
draw = ->
drawn = true
path.style.strokeDashoffset = '0'
erase = ->
drawn = false
path.style.strokeDashoffset = length
undo = ->
if drawn then erase() else draw()
draw()
path.addEventListener("webkitTransitionEnd", undo)
// Generated by CoffeeScript 1.6.3
(function() {
var draw, drawn, erase, length, path, undo;
path = document.querySelector('path');
length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition = 'none';
path.style.strokeDasharray = "" + length + " " + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
drawn = false;
draw = function() {
drawn = true;
return path.style.strokeDashoffset = '0';
};
erase = function() {
drawn = false;
return path.style.strokeDashoffset = length - 20;
};
undo = function() {
if (drawn) {
return erase();
} else {
return draw();
}
};
draw();
path.addEventListener("webkitTransitionEnd", undo);
}).call(this);
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="960" height="500">
<path
fill="none"
stroke="steelblue"
stroke-width="4"
stroke-miterlimit="0"
stroke-dasharray="628.035 628.035"
stroke-dashoffset="128.79"
d="M192,354.901974927634L224,365.62566760306555C256,376.3493602784971,320,397.79674562936026,384,359.66860307380557C448,321.5404605182509,512,223.8367900562783,570,192.79610155957437C628,161.7554130628705,680,197.37770653143522,706,215.18885326571763L732,233"
/>
</svg>
<script src="draw.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment