Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 16, 2014 01:36
Show Gist options
  • Save anonymous/38af460432c6835ca632 to your computer and use it in GitHub Desktop.
Save anonymous/38af460432c6835ca632 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Captain Anonymous.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Walkway.js Example</title>
<script src="../src/walkway.js"></script>
</head>
<style>
svg {
path, line {
stroke: #fff;
stroke-width: 2px;
}
path {
fill: transparent;
}
}
</style>
<body>
<svg id="diamond" width="369px" height="369px" viewBox="0 0 369 369" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch -->
<title>Diamond 1</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<rect stroke="#979797" sketch:type="MSShapeGroup" transform="translate(184.500000, 184.500000) rotate(-45.000000) translate(-184.500000, -184.500000) " x="54" y="54" width="261" height="261"></rect>
</g>
</svg>
<script>
document.addEventListener('DOMContentLoaded', function() {
var svg5 = new Walkway({
selector: '#diamond',
duration: 2500,
// linear easing
easing: 'linear'
});
svg5.draw(function() {
console.dir('Finished diamond!');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment