Skip to content

Instantly share code, notes, and snippets.

@websanya
Created February 18, 2015 12:54
Show Gist options
  • Save websanya/294432625d6e9950631f to your computer and use it in GitHub Desktop.
Save websanya/294432625d6e9950631f to your computer and use it in GitHub Desktop.
PwRbzW
<svg class="svg" viewbox="0 0 1100 1100">
<path fill="none" stroke="deeppink" stroke-width="14" stroke-miterlimit="0"
d="M11.6 269s-19.7-42.4 6.06-68.2 48.5-6.06 59.1 12.1l-3.03 28.8 209-227s45.5-21.2 60.6 1.52c15.2 22.7-3.03 47-3.03 47l-225 229s33.1-12 48.5 7.58c50 63.6-50 97-62.1 37.9"
/>
</svg>
var path = document.querySelector('.svg 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 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment