created by http://livecoding.io

README.md

View this code at http://livecoding.io/7469740

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "css",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
svg {
  height: 800px;
  width: 100%;

}

water.html

<!-- html goes here -->
<svg>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     transform="translate(0,-120)"
     id="layer1">
    

    <path
       style="fill:none;stroke:#FE5E01;stroke-width:50.20000076;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       d="m 222.85714,714.50504 0,-270 c 0,0 0,-144.28572 145.71429,-144.28572 145.8876,0 144.28572,144.28572 144.28572,144.28572 0,0 13.57143,148.57143 -148.57143,148.57143 -162.14286,0 -69.28572,0 -69.28572,0 l 0,0 0,0"
       id="orange"
/>
    <path
       style="fill:none;stroke:#FFFE03;stroke-width:50.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 172.85714,714.50504 0,-270 c 0,0 1e-5,-192.85715 195.71429,-192.85715 195.71428,0 194.28571,192.85715 194.28571,192.85715 0,0 1.42858,197.85714 -194.28571,197.85714 -195.71429,0 -73.57143,0 -73.57143,0"
       id="yellow"/>
    <path
       style="fill:none;stroke:#00A0FF;stroke-width:50.20000076;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       d="m 125,714.50504 0,-270 c 0,0 0.16374,-242.14286 242.14286,-242.14286 246.01973,0 243.02989,242.14286 243.02989,242.14286 0,0 3.99042,245.14285 -241.60132,245.60132 L 295,689.64789 l 0,2 0,0"
       id="blue"
/>
    <path
       style="fill:none;stroke:#000000;stroke-width:51.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       d="m 270.71429,714.50504 0,-270 c 0,0 -0.24235,-96.10212 97.85714,-94.14286 100.13936,2 100.13935,94.14286 100.13935,94.14286 0,0 1.7584,100.71428 -100.13935,100.71428 -97.85714,0 -73.57143,0 -73.57143,0 l 0,0 0,0"
       id="black"
/>

  </g>
</svg>

water.js

/* javascript goes here */
var blue = d3.select('path#blue')
var black = d3.select('path#black')
var yellow = d3.select('path#yellow')
var orange = d3.select('path#orange')


black.style('stroke-dasharray', function(d) {
  //debugger
  var l = d3.select(this).node().getTotalLength();
  return l + 'px, ' + l + 'px';
  })
  .style('stroke-dashoffset', function(d) {
  return d3.select(this).node().getTotalLength() + 'px';
  })
  .transition()
  .duration(2000)
  .style('stroke-dashoffset', '0px');


orange.style('stroke-dasharray', function(d) {
  //debugger
  var l = d3.select(this).node().getTotalLength();
  return l + 'px, ' + l + 'px';
  })
  .style('stroke-dashoffset', function(d) {
  return d3.select(this).node().getTotalLength() + 'px';
  })
  .transition()
  .delay(200)
  .duration(1800)
  .style('stroke-dashoffset', '0px');

yellow.style('stroke-dasharray', function(d) {
  //debugger
  var l = d3.select(this).node().getTotalLength();
  return l + 'px, ' + l + 'px';
  })
  .style('stroke-dashoffset', function(d) {
  return d3.select(this).node().getTotalLength() + 'px';
  })
  .transition()
  .delay(400)
  .duration(1600)
  .style('stroke-dashoffset', '0px');

blue.style('stroke-dasharray', function(d) {
  //debugger
  var l = d3.select(this).node().getTotalLength();
  return l + 'px, ' + l + 'px';
  })
  .style('stroke-dashoffset', function(d) {
  return d3.select(this).node().getTotalLength() + 'px';
  })
  .transition()
  .delay(600)
  .duration(1400)

  .style('stroke-dashoffset', '0px');

water.json

{ }