Skip to content

Instantly share code, notes, and snippets.

@kirjavascript
Last active Jan 7, 2016
Embed
What would you like to do?
clip path hax with snap.svg.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>stroke dash hax with Snap.svg.js</title>
</head>
<body>
<svg></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script>
var yep = Snap('svg');
Snap.load('yep.svg', d => {
yep
.attr({
viewBox:"0,0,1040,600"
})
yep.append(d.select("defs"));
d.selectAll('.path').forEach(p => yep.append(p))
dasher(yep.select("#y"),50,() => {
dasher(yep.select("#e"),45,() => {
dasher(yep.select("#p"),45,() => {
dasher(yep.select("#ex1"),60,() => {
dasher(yep.select("#ex2"),55,() => {
// when you see nesting like this you know it's time to refactor
});
});
});
});
});
// emulates line drawing by using some stroke-dash hax
function dasher(obj,w,callback) {
var path = obj;
var len = path.getTotalLength();
return path.attr({
strokeWidth:w,
strokeDasharray:len,
strokeDashoffset:len
})
.animate({strokeDashoffset:0},len/3,mina.linear,callback)
}
})
</script>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment