Skip to content

Instantly share code, notes, and snippets.

@nicobytes

nicobytes/index.html

Created July 30, 2016 05:16
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 nicobytes/510d6969e07fae059f94d78e9c3579a8 to your computer and use it in GitHub Desktop.
Save nicobytes/510d6969e07fae059f94d78e9c3579a8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<style>
body {
background: #4E8EF7;
}
svg{
position:fixed;
top:50%;
left:52%;
transform:translate(-50%,-50%);
}
img{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<svg id="svg" width="600" height="200"></svg>
<img src="http://i.cubeupload.com/YXOwqX.png" alt="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script>
// Snap.js
var s = Snap("#svg");
//"M15 33 L15 177 L545 177 L545 33 L10 33 Z"
// Squiggly Path
var myPath = s.path("M15 33 L545 33 L545 177 L15 177 L15 28").attr({
id: "squiggle",
fill: "none",
strokeWidth: "10",
stroke: "#ffffff",
strokeMiterLimit: "0",
strokeDasharray: "9 9",
strokeDashOffset: "988.01"
});
// Draw Squiggly Path
var len = myPath.getTotalLength();
// Animate Squiggly Path
myPath.attr({
stroke: '#fff',
strokeWidth: 10,
fill: 'none',
"stroke-dasharray": len + " " + len,
"stroke-dashoffset": len
}).animate({"stroke-dashoffset": 0}, 2000,mina.easeout);
// Animate Discus Along Squiggly Path
// Ref: http://snapsvg.io/docs/#Element.marker
// Discussion: https://groups.google.com/forum/#!topic/snapsvg/TOYtCQvLNHA
//
// -- Any forks at this point apreciated!
//Circle.animate ({});
setTimeout( function() {
Snap.animate(0, len, function( value ) {
movePoint = myPath.getPointAtLength( value );
}, 4000);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment