SVG line drawing on scroll

by Pranab Dey

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <!--search start-->
    <div class="container">
        <img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive" />
        <br>
        <br>
        <img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive" />
        <br>
        <br><img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive" />
<br>
<br>
        <div class="row container-fluid">
            <div class="col-md-4" style="border:1px solid red">
                <img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive scrollme animateme" data-easing="easein" data-when="enter" data-opacity="0" data-from="0.45" data-to="0" data-translatex="-300" />
                <br>
                <p class="scrollme animateme" data-easing="easein" data-when="enter" data-opacity="0" data-from="0.45" data-to="0" data-translatex="-300">Some Text Here..description....</p>
                <br>
                <img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive scrollme animateme" data-easing="easein" data-when="enter" data-opacity="0" data-from="0.45" data-to="0" data-translatex="-300" />
            </div>
            <div class="col-md-4" style="border:1px solid red">
                <div class="frame">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" id="star-svg">
                        <g stroke="red" stroke-width="5" fill="none" stroke-linecap="round">
                            <path class="path" id="star-path" d="m38.5,-4c1,0.91807 2.186,1.55388 4,2.75422c3.44181,2.27748 4.85273,3.8312 6,4.59036c3.62798,2.40067...

CSS

.proj-brand:hover svg {
    fill: green;
}

.proj-brand svg {
    top: -2px;
    position: relative;
}

.proj-brand span {
    color: Green;
    font-family: "Helvetica Neue", arial, freesans, clean, sans-serif;
    font-weight: 600;
    font-size: 25px;
    top: -9px;
    position: relative;
}

.logo-small {
    top: 15px;
    position: relative;
}

@media screen and (max-width: 568px) {
    .frame svg {
        width: 300px;
        height: 300px;
        transition: 0.2s linear;
    }
}

JavaScript

$(window).scroll(function () {
            drawLines();
        });

        function drawLines() {
            $.each($("path"), function (i, val) {
                var line = val;
                drawLine($(this), line);
            });
        }

        function drawLine(container, line) {
            var length = 0;
            var pathLength = line.getTotalLength();
            var distanceFromTop = container.offset().top - $(window).scrollTop();
            var percentDone = 1 - (distanceFromTop / $(window).height());
            length = percentDone * pathLength;
            line.style.strokeDasharray = [length, pathLength].join(' ');
        }