Skip to content

Instantly share code, notes, and snippets.

/options.json

Created November 14, 2013 14:05
Show Gist options
  • Save anonymous/7467313 to your computer and use it in GitHub Desktop.
Save anonymous/7467313 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
options.json
{
"libraries": [
"d3"
],
"mode": "css",
"layout": "fullscreen mode (horizontal)",
"resolution": "reset"
}
Raw
water.css
svg {
position: absolute;
height: 100%;
width: 100%;
}
body {
background-color: black
}
Raw
water.html
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://web.resource.org/cc/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="602.79877"
height="503.14679"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.45.1"
sodipodi:docbase="/home/dave/_unsorted/_labels"
sodipodi:docname="Frasier.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
inkscape:export-filename="/home/dave/_labels/Frasier.png"
inkscape:export-xdpi="200"
inkscape:export-ydpi="200"
version="1.0">
<defs
id="defs4">
<linearGradient
id="linearGradient9033">
<stop
style="stop-color:#b9d2ff;stop-opacity:1;"
offset="0"
id="stop9035" />
<stop
id="stop10010"
offset="0.30158731"
style="stop-color:#699fff;stop-opacity:1;" />
<stop
style="stop-color:#002a78;stop-opacity:1;"
offset="1"
id="stop9037" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient9039"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10023"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10025"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10027"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10029"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10031"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10033"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10035"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient9033"
id="linearGradient10037"
gradientUnits="userSpaceOnUse"
x1="343.38309"
y1="549.04852"
x2="343.38309"
y2="692.71228" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
gridtolerance="10000"
guidetolerance="10"
objecttolerance="10"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.52537415"
inkscape:cx="466.96158"
inkscape:cy="631.03499"
inkscape:document-units="px"
inkscape:current-layer="layer1"
inkscape:window-width="1278"
inkscape:window-height="979"
inkscape:window-x="0"
inkscape:window-y="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-70.244415,-289.01917)">
<path
style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 170.68849,602.12487 L 177.36023,601.01291 L 177.36023,474.24999 L 209.05095,474.24999 L 209.05095,602.68085 L 214.05476,602.68085 L 214.05476,556.53471 L 236.29386,556.53471 L 236.29386,602.12487 L 245.18952,602.12487 L 245.18952,426.43591 L 254.36314,417.26227 L 269.09655,417.26227 L 277.29723,425.46295 L 277.29723,582.10968 L 291.89165,582.10968 L 291.89165,475.36195 L 333.58997,475.36195 L 333.58997,537.07548 L 343.59757,537.07548 L 343.59757,411.98048 L 387.51982,411.98048 L 387.51982,580.99772 L 393.63557,580.99772 L 393.63557,452.01088 L 415.87467,429.77177 L 437.27982,451.17691 L 437.27982,498.71302 L 455.90508,498.71302 C 455.90508,498.71302 465.91268,448.77363 465.91268,416.98429 C 465.91268,388.76902 461.45566,361.59981 458.1604,359.59152 C 450.53085,354.94177 444.87254,359.67436 438.97166,350.81543 C 437.70029,348.90673 430.89081,347.6556 423.7465,347.68583 C 430.48953,346.35754 435.98204,344.16153 438.32819,341.59115 C 443.65986,335.74991 450.03227,336.69826 455.54664,335.0371 C 461.36943,333.28303 468.9825,331.57747 468.8435,329.35356 C 468.68647,326.84117 469.87238,325.85963 469.28617,324.29318 C 468.69995,322.72671 466.19066,323.14144 466.19066,321.91209 C 466.19066,319.43591 471.81252,321.2631 472.59415,318.34605 C 473.95016,313.28536 474.60956,290.26917 474.60956,290.26917 C 474.60956,290.26917 476.1637,313.25987 477.58821,318.57622 C 478.54213,322.13631 483.14799,318.53022 483.14799,321.91209 C 483.14799,323.58002 481.03693,323.2759 480.13346,324.17935 C 479.23001,325.08281 479.53413,327.19387 479.53413,328.8618 C 479.53413,331.64168 486.47608,332.26467 493.85753,334.20926 C 499.72721,335.75558 509.31594,335.60495 512.40247,340.91033 C 513.93922,343.55182 518.15872,345.91432 525.4023,347.20908 C 518.17459,347.48708 513.11547,347.93758 512.05883,350.54493 C 504.84718,361.02861 499.54934,355.27075 493.98956,358.88461 C 487.36426,363.19108 482.87,384.15597 482.87,416.98429 C 482.87,426.72976 487.03983,455.34676 487.03983,455.34676 L 508.72296,455.34676 L 508.72296,471.47011 L 570.99247,471.47011 L 570.99247,557.09068 L 579.61013,557.09068 L 579.61013,430.32775 L 583.50198,430.32775 L 588.10875,413.13503 L 591.42465,413.13503 L 593.09259,398.63701 L 597.26242,393.91121 L 597.26242,379.17779 L 604.43792,375.91775 L 605.41088,355.68774 L 606.24484,375.84194 L 612.8732,379.27341 L 612.8732,392.79925 L 617.96484,398.98114 L 620.74473,413.09243 L 623.21595,413.23586 L 627.53873,430.30437 L 630.89312,430.31273 L 630.89312,602.68085 L 639.37773,602.68085 L 639.37773,504.82877 L 647.16142,504.82877"
id="path2188"
sodipodi:nodetypes="cccccccccccccccccccccccccccccssscsssssscssssssccssccccccccccccccccccccccccccc" />
<g
id="text"
style="fill:url(#linearGradient10023);fill-opacity:1;stroke:#000000;stroke-width:0.64236897;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.5567377,0,0,1.5567377,-180.13347,-286.669)">
<path
id="path4142"
d="M 162.18264,549.04854 L 217.95431,549.04854 L 217.95431,563.41915 L 179.54802,553.12822 L 179.54802,613.37415 L 210.08469,608.58394 L 210.08469,622.27024 L 178.6062,616.79572 L 178.6062,690.01742 L 161.15617,690.01742 L 162.18264,549.04854 z "
style="fill:url(#linearGradient10025);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.64236897;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="cscssccssssssccccc"
id="path4144"
d="M 239.85239,581.89566 C 239.85239,581.89566 268.27992,586.48952 268.67697,606.33068 C 269.10248,627.59417 254.45828,634.1275 245.66907,638.00948 C 250.07062,641.46595 252.81879,642.32809 258.24554,649.86802 C 262.60677,655.92752 265.45571,662.93725 265.45571,671.49119 C 265.45571,680.04512 273.72598,690.70173 273.72598,690.70173 L 256.6181,690.70173 C 256.6181,690.70173 254.90256,688.46376 253.62204,681.69742 C 252.05662,673.42571 253.90571,662.08483 250.65959,652.94744 C 248.44745,646.72055 246.35338,641.43105 242.58965,640.74674 C 240.38612,640.3461 234.86187,644.77605 234.86187,641.40619 C 234.86187,639.16259 237.04789,638.41888 238.48376,637.66733 C 242.36589,635.63538 255.24947,627.74476 255.24947,611.3212 C 255.24947,594.89764 248.40632,584.97508 232.66708,584.97508 C 232.67166,584.97508 232.66708,691.38605 232.66708,691.38605 L 218.63862,691.38605 L 218.63862,581.89566 L 239.85239,581.89566 z "
style="fill:url(#linearGradient10027);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.64236897;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path4148"
d="M 316.28125,581.59375 L 275.4375,690.40625 L 287.5,690.40625 L 303.375,639.625 L 322.40625,639.625 L 339.84375,690.53125 L 351.90625,690.53125 L 316.28125,581.59375 z M 313.03125,610.40625 L 321.125,635.375 L 304.65625,635.375 L 313.03125,610.40625 z "
style="fill:url(#linearGradient10029);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.64236897;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="581.60785"
x="415.58002"
height="109.63937"
width="12.623421"
id="rect5122"
style="opacity:1;fill:url(#linearGradient10031);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.64236897;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccsssssccssssssc"
id="path6111"
d="M 396.96692,595.31968 L 396.96692,583.61665 C 396.96692,583.61665 388.3847,580.3398 379.80247,580.3398 C 371.22025,580.3398 356.70848,583.77269 356.70848,597.66029 C 356.70848,611.54789 369.65984,624.96737 375.74542,632.14523 C 381.831,639.32309 394.78236,655.39526 394.78236,669.90702 C 394.78236,684.41879 385.59378,688.47584 374.65314,688.47584 C 366.69508,688.47584 354.67996,673.33991 354.67996,673.33991 L 354.67996,687.53959 C 354.67996,687.53959 364.35447,692.68893 373.09273,692.68893 C 381.831,692.68893 391.50551,689.1 395.56256,684.41879 C 399.61961,679.73757 403.20854,674.12012 403.20854,663.35332 C 403.20854,652.58653 393.9977,634.69175 387.29241,625.27945 C 379.42954,614.24223 364.97863,600.81782 364.97863,592.51096 C 364.97863,587.04954 374.35787,583.95061 380.2706,584.39685 C 388.54073,585.02101 396.96692,595.63177 396.96692,595.31968 z "
style="fill:url(#linearGradient10033);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.64236897;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:url(#linearGradient10035);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.64236897;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 513.85943,581.89566 C 513.85943,581.89566 542.28696,586.48952 542.68401,606.33068 C 543.10952,627.59417 528.46532,634.1275 519.67611,638.00948 C 524.07766,641.46595 526.82583,642.32809 532.25258,649.86802 C 536.61381,655.92752 539.46275,662.93725 539.46275,671.49119 C 539.46275,680.04512 547.73302,690.70173 547.73302,690.70173 L 530.62514,690.70173 C 530.62514,690.70173 528.9096,688.46376 527.62908,681.69742 C 526.06366,673.42571 527.91275,662.08483 524.66663,652.94744 C 522.45449,646.72055 520.36042,641.43105 516.59669,640.74674 C 514.39316,640.3461 508.86891,644.77605 508.86891,641.40619 C 508.86891,639.16259 511.05493,638.41888 512.4908,637.66733 C 516.37293,635.63538 529.25651,627.74476 529.25651,611.3212 C 529.25651,594.89764 522.41336,584.97508 506.67412,584.97508 C 506.6787,584.97508 506.67412,691.38605 506.67412,691.38605 L 492.64566,691.38605 L 492.64566,581.89566 L 513.85943,581.89566 z "
id="path6113"
sodipodi:nodetypes="cscssccssssssccccc" />
<path
sodipodi:nodetypes="ccccccccccccc"
id="path6115"
d="M 485.75394,581.43208 L 485.75394,593.60324 L 454.07773,585.64518 L 454.07773,631.36503 L 476.7036,628.40026 L 476.7036,638.54289 L 453.76565,635.26604 L 453.76565,687.78525 L 486.84623,680.36173 L 486.84623,691.44061 L 440.50221,691.44061 L 440.50221,581.42474 L 485.75394,581.43208 z "
style="fill:url(#linearGradient10037);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.64236897;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
</svg>
Raw
water.js
/* javascript goes here */
d3.select('path')
.style('stroke', 'white')
.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(5000)
.style('stroke-dashoffset', '0px');
d3.select('svg').select('g')
.attr('transform', 'scale(1.3)translate(-100 -280)')
.transition()
.duration(4000)
.attr('transform', 'scale(1)translate(-70 -280)')
d3.select('g#text')
.style('opacity', 0)
.transition()
.delay(4500)
.ease('exp')
.duration(500)
.style('opacity', 1)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment