SVG Draw Line

by HYEONGJINKIM

HTML

<script src="http://maxwellito.github.io/vivus/dist/vivus.js"></script>
<div class="bloc-anim">
    <div class="col3">
        <svg id="opturateur1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" onclick="obt1.reset(); obt1.play();">
            <circle fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" cx="100" cy="100" r="90" />
            <circle fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" cx="100" cy="100" r="85.74" />
            <circle fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" cx="100" cy="100" r="72.947" />
            <circle fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" cx="100" cy="100" r="39.74" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="34.042" y1="131.189" x2="67.047" y2="77.781" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="31.306" y1="75.416" x2="92.41" y2="60.987" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="68.81" y1="34.042" x2="122.219" y2="67.046" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="124.584" y1="31.305" x2="139.013" y2="92.409" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="165.957" y1="68.809" x2="132.953" y2="122.219" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="168.693" y1="124.584" x2="107.59" y2="139.012" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="131.19" y1="165.957" x2="77.781" y2="132.953" />
            <line fill="none" stroke="#f9f9f9" stroke-width="5" stroke-miterlimit="10" x1="75.417" y1="168.693" x2="60.987" y2="107.59" />
        </svg>
        <div class="col-container">
           ...

CSS

.bloc-anim {
    background: #2e2e2e;
    margin: auto;
    max-width: 960px;
    padding: 0 20px;
    min-height: 375px;
}
.col3 {
    width: 33.33%;
    float: left;
    text-align: center;
    border-bottom-color: #666;
    border-bottom-style: solid;
}

JavaScript

$(function () {
    var obt = [new Vivus('opturateur1', {
        type: 'delayed',
        duration: 150
    }),
    new Vivus('opturateur2', {
        type: 'async',
        duration: 150
    }),
    new Vivus('opturateur3', {
        type: 'oneByOne',
        duration: 150
    })];
    new Vivus('polaroid', {
        type: 'scenario-sync',
        duration: 40
    })

    $('.col3').on('click', 'button, svg', function () {
        obt[$(this).parents('.col3').index()].reset();
        obt[$(this).parents('.col3').index()].play();
    });
});

//reset()
//play()