<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1200 600">        <line id="uno" x1="600" y1="0" x2="600" y2="0" stroke="navajowhite" stroke-width="1"            stroke-linecap="round" />        <line id="dos" x1="1200" y1="300" x2="1200" y2="300" stroke="teal" stroke-width="1"            stroke-linecap="round" />        <line id="tres" x1="0" y1="0" x2="0" y2="0" stroke="darkseagreen" stroke-width="1"            stroke-linecap="round" />        <line id="cuatro" x1="0" y1="600" x2="0" y2="600" stroke="tomato" stroke-width="1"            stroke-linecap="round" />        <line id="cinco" x1="1200" y1="0" x2="1200" y2="0" stroke="slateblue" stroke-width="1"            stroke-linecap="round" />        <line id="seis" x1="1200" y1="600" x2="1200" y2="600" stroke="turquoise" stroke-width="1"            stroke-linecap="round" />        <g id="vertical-first">            <line class="vertical" x1="100" y1="0" x2="100" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="200" y1="0" x2="200" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="300" y1="0" x2="300" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="400" y1="0" x2="400" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="500" y1="0" x2="500" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="600" y1="0" x2="600" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="700" y1="0" x2="700" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="800" y1="0" x2="800" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="900" y1="0" x2="900" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="1000" y1="0" x2="1000" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="1100" y1="0" x2="1100" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="0" x2="1200" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="150" y1="0" x2="150" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="250" y1="0" x2="250" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="350" y1="0" x2="350" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="450" y1="0" x2="450" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="550" y1="0" x2="550" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="650" y1="0" x2="650" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="750" y1="0" x2="750" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="850" y1="0" x2="850" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="950" y1="0" x2="950" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="1050" y1="0" x2="1050" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="1150" y1="0" x2="1150" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="50" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="50" x2="0" y2="50" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="100" x2="0" y2="100" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="150" x2="0" y2="150" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="200" x2="0" y2="200" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="250" x2="0" y2="250" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="300" x2="0" y2="300" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="350" x2="0" y2="350" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="400" x2="0" y2="400" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="450" x2="0" y2="450" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="500" x2="0" y2="500" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="550" x2="0" y2="550" stroke="black" stroke-width="1" />            <line class="vertical" x1="0" y1="600" x2="0" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="100" y1="600" x2="100" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="200" y1="600" x2="200" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="300" y1="600" x2="300" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="400" y1="600" x2="400" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="500" y1="600" x2="500" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="600" y1="600" x2="600" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="700" y1="600" x2="700" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="800" y1="600" x2="800" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="900" y1="600" x2="900" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="1000" y1="600" x2="1000" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="1100" y1="600" x2="1100" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="600" x2="1200" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="150" y1="600" x2="150" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="250" y1="600" x2="250" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="350" y1="600" x2="350" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="450" y1="600" x2="450" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="550" y1="600" x2="550" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="650" y1="600" x2="650" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="750" y1="600" x2="750" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="850" y1="600" x2="850" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="950" y1="600" x2="950" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="1050" y1="600" x2="1050" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="1150" y1="600" x2="1150" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="50" y1="600" x2="50" y2="600" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="0" x2="1200" y2="0" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="50" x2="1200" y2="50" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="100" x2="1200" y2="100" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="150" x2="1200" y2="150" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="200" x2="1200" y2="200" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="250" x2="1200" y2="250" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="300" x2="1200" y2="300" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="350" x2="1200" y2="350" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="400" x2="1200" y2="400" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="450" x2="1200" y2="450" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="500" x2="1200" y2="500" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="550" x2="1200" y2="550" stroke="black" stroke-width="1" />            <line class="vertical" x1="1200" y1="600" x2="1200" y2="600" stroke="black" stroke-width="1" />        </g>    </svg>

 body        {            background-color: snow;        }                body, svg        {            width: 100%;            height: 100%;        }

 $("#uno")            .delay(200)            .velocity({ y2: 600 }, { duration: 1500, easing: "spring" })            .delay(50)            .velocity({ strokeWidth: 1500 });        $("#dos")            .delay(2000)            .velocity({ x2: 0 }, { duration: 1500, easing: "swing" })            .delay(50)            .velocity({ strokeWidth: 1500 });        $("#tres")            .delay(4000)            .velocity({ x2: 1200, y2: 600 }, { duration: 1500, easing: "spring" })            .delay(50)            .velocity({ strokeWidth: 1500 });        $("#cuatro")            .delay(6000)            .velocity({ x2: 1200, y2: 0 }, { duration: 1500, easing: "swing" })            .delay(50)            .velocity({ strokeWidth: 1500 });        $("#cinco")            .delay(8000)            .velocity({ x2: 0, y2: 600 }, { duration: 1500, easing: "spring" })            .delay(50)            .velocity({ strokeWidth: 1500 });        $("#seis")            .delay(10000)            .velocity({ x2: 0, y2: 0 }, { duration: 1500, easing: "spring" })            .delay(50)            .velocity({ strokeWidth: 1500 });        $(".vertical")            .delay(12000)            .velocity({ y2: 300, x2: 600 }, { duration: 1500, easing: "easeInCubic" })            .delay(100)            .velocity({ y1: 300, x1: 600 }, { duration: 1500, loop: 1, easing: "easeInCubic" }); //@ sourceURL=pen.js