svg - line following scroll

very cool path-tracing effect via skrollr and a simple svg path

by jack gold

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.27/skrollr.min.js"></script>
<div style="text-align:center; background:black; color: white;">
    <div id="skrollr-body">
        <p style="padding:30px; margin-bottom: 100px;">check this shit out
            <br />(scroll down)</p>
        <!-- i traced one of the lines from the png real quick in illustrator and then just copied out the svg code it generated... -->
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300px" viewBox="0 0 567.1 905.1" xml:space="preserve">
            <polyline fill="none" stroke-width="5" stroke="#555" stroke-miterlimit="2" points="215.7,0 215.7,102 286.6,102 286.6,330 30.6,330 30.6,489 
	506.6,489 506.6,514 180.6,514 180.6,578 28.6,578 28.6,613 78.6,613 78.6,719 94.6,734 94.6,816 108.6,816 108.6,834 96.6,834 
	97.6,867 80.1,883.5 21.6,883.5  " />
            <!-- second line is a little 5px white line (basically a dot) that runs just 'in front' of our main animated line. you can mess with the dasharray and offset to get different effects. (you can also just remove it, nothing will break.) -->
            <polyline fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" stroke="#fff" stroke-miterlimit="2" stroke-dasharray="5 6000" data-100="stroke-dashoffset:6005;" data-999="stroke-dashoffset:0;" points="215.7,0 215.7,102 286.6,102 286.6,330 30.6,330 30.6,489 
	506.6,489 506.6,514 180.6,514 180.6,578 28.6,578 28.6,613 78.6,613 78.6,719 94.6,734 94.6,816 108.6,816 108.6,834 96.6,834 
	97.6,867 80.1,883.5 21.6,883.5 " />
            <!-- finally the important one - the main animated cyan line. the 6000 here is a pretty arbitrary number - it just needs to be longer than the line itself. the 100 is because the line starts a bit down the page; if it started right at the top we'd use data-0. the 1000 is also kind of arbitrary and basically controls the speed of the line. tweak and see what happens. -->
            <polyline fill="none"...

CSS

* {
    box-sizing: border-box;
    font-family: sans-serif;
}

JavaScript

skrollr.init({
    forceHeight: false
});