Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/example.svg

Last active August 29, 2015 14:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tonyfast/c9d28bef6d46c1927409 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tonyfast/c9d28bef6d46c1927409 to your computer and use it in GitHub Desktop.
Download ZIP
d3 + styleTween + external SVG document
Raw
readme.md

Demonstration

  • Load external SVG file with d3
  • Append SVG to document
  • Use styletween to interpolate colors
Display the source blob
Display the rendered blob
Raw
example.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<head>
<script src="//cdn.jsdelivr.net/g/d3js,zepto"></script>
</head>
<body>
<script>
;( function(){
// svg is an xml file
d3.xml('example.svg', function(d){
$(d).children().appendTo('body');
// change color
d3.select('path')
.transition()
.duration( 2000 )
.styleTween("fill", function(){ return d3.interpolate("black", "blue"); })
.transition()
.duration( 2000 )
.styleTween("fill", function(){ return d3.interpolate("blue", "yellow" ); });
});
$('body').prepend('<br>');
//UFO demo
d3.xml('ufo.svg', function(d){
$(d).children()
.prependTo('body');
color_of_interest = "#ffd200";
lights = d3.select('svg')
.selectAll('path')
.filter( function(){
var c = d3.select(this)
.style('fill');
return d3.rgb( c ).toString() == color_of_interest;
})
.call( function(s){
s.transition().duration(2000)
.styleTween("fill", function(){
return d3.interpolate(color_of_interest, "darkred" ) })
.transition().duration(2000)
.styleTween("fill", function(){
return d3.interpolate("darkred",color_of_interest );
})
.transition().duration(2000)
.styleTween("fill", function(){
return d3.interpolate(color_of_interest, "darkred" ) })
.transition().duration(2000)
.styleTween("fill", function(){
return d3.interpolate("darkred",color_of_interest );
});
});
});
})();
</script>
</body>
Display the source blob
Display the rendered blob
Raw
ufo.svg
<?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://creativecommons.org/ns#"
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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32.738434mm"
height="26.431721mm"
viewBox="0 0 116.00232 93.655703"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="UFO.svg">
<title
id="title4244">UFO - line art</title>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="72.744302"
inkscape:cy="16.345205"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-global="false"
fit-margin-top="1"
fit-margin-right="1"
fit-margin-bottom="1"
fit-margin-left="1"
inkscape:window-width="1373"
inkscape:window-height="900"
inkscape:window-x="712"
inkscape:window-y="203"
inkscape:window-maximized="0">
<inkscape:grid
type="xygrid"
id="grid4330" />
</sodipodi:namedview>
<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" />
<dc:title>UFO - line art</dc:title>
<cc:license
rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
<dc:date>2015-02-06</dc:date>
<dc:creator>
<cc:Agent>
<dc:title>Frank Tremmel</dc:title>
</cc:Agent>
</dc:creator>
<dc:subject>
<rdf:Bag>
<rdf:li>ufo</rdf:li>
<rdf:li>flying</rdf:li>
<rdf:li>object</rdf:li>
<rdf:li>alien</rdf:li>
<rdf:li>vehicle</rdf:li>
<rdf:li>ufo</rdf:li>
<rdf:li>flugobject</rdf:li>
<rdf:li>außerirdischer</rdf:li>
<rdf:li>fahrzeug</rdf:li>
<rdf:li>line art</rdf:li>
<rdf:li>outline</rdf:li>
<rdf:li></rdf:li>
</rdf:Bag>
</dc:subject>
<dc:description>coloured line art UFO</dc:description>
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-134.6233,-254.42205)">
<path
style="fill:#00de30;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="m 188.44705,336.55178 -0.58444,3.8612 c 0,0 -1.23508,0.68716 -1.29337,1.38367 -0.0582,0.69652 -0.22553,1.97405 1.05686,2.19777 1.59846,0.27886 1.91315,-0.64596 2.00423,-1.49701 0.0694,-0.64819 -0.22965,-1.51097 -0.22965,-1.51097 l 0.5754,-4.12889 z"
id="path4242"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsssccc" />
<path
style="fill:#a8a8a8;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 186.96429,331.46935 -0.71429,3.75 c 0,0 1.27639,1.50499 3.03572,1.60714 1.75933,0.10215 3.21428,-1.07143 3.21428,-1.07143 l 0.53571,-3.57143 z"
id="path4240"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cczccc" />
<path
style="fill:#0067ff;fill-rule:evenodd;stroke:#000000;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 171.09459,318.48637 c 15.16956,4.67601 25.06663,5.96696 39.26967,4.9245 0,0 -5.47427,10.55271 -20.45557,8.58629 -14.98131,-1.96641 -18.8141,-13.51079 -18.8141,-13.51079 z"
id="path4143"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cczc" />
<path
transform="matrix(0.99121728,0.13224337,-0.13224337,0.99121728,0,0)"
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#95b8ff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.77165365;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
d="m 283.04143,265.10547 c -10e-6,10.91574 -23.13932,24.414 -52.0038,24.414 -28.86448,0 -52.52375,-13.49826 -52.52376,-24.414 7.92982,-10.89278 23.39929,-19.7647 52.26378,-19.7647 28.86449,0 48.06294,9.76972 52.26378,19.7647 z"
id="path4136"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
style="fill:#f2701c;fill-rule:evenodd;stroke:#000000;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 142.20785,285.98593 c -2.31263,1.74398 -4.29841,7.05125 -2.37372,10.20767 0,0 11.88302,20.00111 45.16216,25.85478 41.4745,7.29522 58.42349,-12.00914 58.42349,-12.00914 2.84752,-3.62322 3.46241,-7.96443 2.0203,-9.96782 -0.88388,4.42807 -15.4809,23.03877 -58.29722,16.93364 -30.02912,-4.28182 -48.21429,-24.52555 -44.93501,-31.01913 z"
id="path4139"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsccsc" />
<path
style="fill:#0067ff;fill-rule:evenodd;stroke:#000000;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 170.20491,282.09648 c -0.65526,-1.0885 -1.3626,-1.62743 -0.10434,-4.34156 0,0 6.98137,-22.2105 29.70047,-18.48748 22.71911,3.72301 21.98219,26.18602 21.98219,26.18602 0.37837,1.46006 0.15366,2.79996 -0.73684,4.00723 -9.62482,8.78623 -48.29355,4.83725 -50.84148,-7.36421 z"
id="path4141"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cczccc" />
<path
style="fill:#ffd200;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 178.39216,294.47247 c -4.04483,-2.45068 -8.32653,0.75411 -9.98391,3.26549 -1.64925,2.49905 -1.91263,8.11826 1.64095,10.08407 3.34644,1.85121 7.95067,-0.39653 9.54793,-3.0375 1.43138,-2.36672 2.79833,-7.88653 -1.20497,-10.31206 z"
id="path4145"
inkscape:connector-curvature="0"
sodipodi:nodetypes="sssss" />
<path
style="fill:#7c97c2;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 181.06984,298.7884 c 0,0 -2.92219,-3.67827 -8.83883,-1.51522 -2.62366,0.95918 -4.54569,7.44987 -4.54569,7.44987 0,0 -1.92718,-6.61057 3.40927,-9.72272 7.72757,-4.50662 9.97525,3.78807 9.97525,3.78807 z"
id="path4147"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
style="fill:#ffd200;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 161.89576,283.35425 c -2.51635,-2.87845 -6.59868,-1.45283 -8.48979,0.0792 -1.88182,1.52449 -3.45936,5.79411 -1.20282,8.17855 2.12501,2.24545 6.22168,1.63679 8.09818,-0.01 1.68161,-1.47567 4.08495,-5.39897 1.59443,-8.24787 z"
id="path4145-0"
inkscape:connector-curvature="0"
sodipodi:nodetypes="sssss" />
<path
style="fill:#7c97c2;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 162.90265,287.33727 c 0,0 -1.35123,-3.55096 -6.43817,-3.32829 -2.25574,0.0987 -5.32419,4.63525 -5.32419,4.63525 0,0 0.13259,-5.56945 5.00478,-6.66591 7.05528,-1.58773 6.75758,5.35895 6.75758,5.35895 z"
id="path4147-2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
style="fill:#ffd200;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 212.54947,304.14415 c -1.86665,-5.23351 -6.53313,-5.61261 -8.9291,-4.62832 -2.38419,0.97942 -5.18686,5.78161 -3.46007,10.21282 1.62617,4.17294 6.08813,5.64719 8.49956,4.50221 2.16101,-1.02607 5.73711,-4.90693 3.88961,-10.08671 z"
id="path4145-8"
inkscape:connector-curvature="0"
sodipodi:nodetypes="sssss" />
<path
style="fill:#7c97c2;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 212.53547,310.00592 c 0,0 -0.46341,-5.47881 -5.86068,-8.01884 -2.39334,-1.12636 -6.83208,3.19966 -6.83208,3.19966 0,0 1.63594,-7.33755 7.0427,-6.08002 7.82939,1.82099 5.65006,10.8992 5.65006,10.8992 z"
id="path4147-4"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
style="fill:#ffd200;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 227.75613,293.20049 c 1.88727,-2.1421 6.05186,-0.13833 8.03955,1.47216 1.97794,1.60262 5.27756,5.45973 2.90574,7.96639 -2.23354,2.36053 -6.66572,0.0792 -8.63807,-1.65179 -1.7675,-1.5513 -4.92496,-4.79181 -2.30722,-7.78672 z"
id="path4145-0-1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssssc" />
<path
style="fill:#7c97c2;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 227.13975,294.29407 c 0,0 1.99987,-0.94208 6.83016,1.36249 3.12858,1.49267 5.21732,6.07237 5.21732,6.07237 0.54133,-0.90986 0.20446,-5.26723 -5.38668,-8.33338 -5.6639,-3.10605 -6.6608,0.89852 -6.6608,0.89852 z"
id="path4147-2-1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
style="fill:#ffd200;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 181.95799,269.96446 c -3.15846,-1.58595 -6.15664,1.05855 -7.24153,3.02965 -1.07955,1.96144 -1.24909,6.64088 1.59932,7.688 1.7544,0.64494 5.49621,-1.1267 6.52865,-3.19073 0.92517,-1.84978 2.23964,-5.95713 -0.88639,-7.5268 z"
id="path4145-0-9"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssssc" />
<path
style="fill:#7c97c2;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 183.98604,273.20106 c 0,0 -2.21683,-3.28234 -6.49473,-1.31705 -1.89703,0.87133 -3.20991,6.53933 -3.20991,6.53933 0,0 -1.57909,-5.08439 2.27285,-7.63034 5.44249,-3.59723 7.52107,1.2027 7.43179,2.40806 z"
id="path4147-2-14"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
style="fill:#ffd200;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 210.60266,272.37624 c 3.15846,-1.58595 6.15664,1.05855 7.24153,3.02965 1.07955,1.96144 2.05724,6.92535 -0.70646,8.17907 -2.60262,1.18066 -6.29978,-1.88562 -7.33222,-3.94965 -0.92517,-1.84978 -2.32893,-5.68928 0.7971,-7.25895 z"
id="path4145-0-9-0"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssssc" />
<path
style="fill:#7c97c2;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 213.59355,283.1457 c 0,0 2.72167,1.09696 3.7373,-3.49991 0.45052,-2.03838 -1.52109,-5.98391 -2.31068,-7.08576 0.72049,0.60149 3.94232,2.66016 4.02563,6.70919 0.1143,5.556 -4.18285,4.83445 -5.45225,3.87648 z"
id="path4147-2-14-6"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
style="fill:#ffd200;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 198.21772,274.81517 c -3.5562,-1.19956 -6.31541,2.02606 -7.16315,4.25982 -0.84358,2.2228 -0.0734,6.62445 3.01845,7.53318 2.91162,0.85574 6.08641,-1.6838 6.86515,-4.00761 0.69786,-2.0825 0.79924,-6.59814 -2.72045,-7.78539 z"
id="path4145-81"
inkscape:connector-curvature="0"
sodipodi:nodetypes="sssss" />
<path
style="fill:#7c97c2;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
d="m 200.84946,282.75168 c 0,0 -3.40497,2.21928 -5.14823,2.35924 -2.20929,0.17738 -4.81621,-2.20585 -4.81621,-2.20585 0,0 0.87269,4.06279 4.86826,3.77105 3.46161,-0.25275 5.09618,-3.92444 5.09618,-3.92444 z"
id="path4147-3"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscsc" />
<path
transform="matrix(0.99387854,0.11047831,-0.11047831,0.99387854,0,0)"
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.0629921;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
d="m 229.52637,240.90898 a 3.1567266,1.5152289 0 0 1 -3.15673,1.51523 3.1567266,1.5152289 0 0 1 -3.15672,-1.51523 3.1567266,1.5152289 0 0 1 3.15672,-1.51523 3.1567266,1.5152289 0 0 1 3.15673,1.51523 z"
id="path4237"
inkscape:connector-curvature="0" />
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment