D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
clhenrick
Full window
Github gist
sneaky SVG
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } #sneaky { position: absolute; left: -9999px; } .target { width: 200px; height: 200px; background-image: url('icons/curvy-line.svg'); background-size: cover; padding: 0; } .target svg { width:100%; height: 100% } </style> </head> <body> <div class='target'></div> <!-- svg icon is embedded into the DOM and hidden off the viewport --> <svg id='sneaky' height="0" width="0"> <path fill="#809D89" d="M2.8,24c0.8-0.9,1.5-1.8,2.2-2.7c0.9-1.2,2.4-1.7,3.4-2.8c1.2-1.2,0.5-0.9-0.6-2c-0.2-0.2-0.8,0.6-0.6-0.5 c0.3-1.2,2-0.7,2.7-0.8c3.4-0.3,3.6-5.3,5.5-7.4c2-2.2,3.8-4.2,6.2-5.9c-0.5,0.7-1,1.5-1.8,2c1.5-1,2.7-2.2,4.3-3.1 c-0.4,1-1.2,1.7-1.9,2.4c1-0.8,2-1.7,3.2-1.9c-0.6,0.9-1.6,1.5-2.4,2.2c1-0.5,2.1-1,3.2-1.2c-0.8,0.8-1.8,1.4-2.7,2.2 c1.1-0.4,2.2-0.7,3.4-0.9c-0.9,0.8-2.1,1.1-3.1,1.8C25,5.1,26.1,4.9,27.2,5c-0.7,0.4-1.5,0.7-2.3,0.9c0.2,0,1-0.1,1.2,0 c-0.4-0.4-2.7,4.5-2,4.2c-0.4,0.2-1,2.3-1.3,2.8c-0.3,0.5-0.6,0.7-0.9,1.2c0.1,0.2,0.1,0.3,0,0.5c-0.2,0-0.4,0.1-0.6,0.2 c0.1,0.2,0.1,0.5,0,0.7c-0.2-0.1-0.3-0.1-0.5-0.1c-0.2,0.8-1.2,1.9-2,1.8c0.4,0,0.4,0.9-0.4,1c0.8,0.9,7.5,3.5,6.1,4.9 c-0.9,0.9-2.5,0.1-3.6-0.4c-1.3-0.6-3.4-1.9-4.8-1.4c0.1,0,0.2,0.1,0.2,0.2c-0.2,0-0.4,0.1-0.6,0.1c0,0,0.5,0.3,0.4,0.4 C15.9,22,15.6,22,15.3,22c0.6,0.5,0.2,0.3-0.2,0.6c0.1,0.1,0.2,0.2,0.1,0.3c-0.2,0.1-0.4,0.1-0.6,0c0.2,0.6,0,0.1-0.2,0.5 c0.2-0.1-0.4,0.3-0.7,0.4c0.1,0.6-0.3,0.9-0.9,1c-0.2,0.8-1.8,0.9-2.6,1.3c-0.2,0.1-0.6,0.5-0.8,0.6C9.5,26.7,7.9,28,8.4,28 c-0.2,0-0.6-0.7-0.7-0.9c0.1,0.8-0.1,1.5-0.7,2.1c-0.1-0.7-0.3-1.4-0.4-2.1c-0.1,0.6-0.4,1.2-0.7,1.7c-0.1-0.6-0.2-1.2-0.3-1.7 c-0.2,0.5-0.4,0.6-0.7,0.9c-0.1-0.5-0.1-1-0.2-1.4c-0.1,0.1-0.2,0.2-0.4,0.3c-0.4-0.6-0.5-1.2-0.1-1.8c-0.7,0.2-1-0.2-0.6-0.8 C3.3,24.4,2.7,24.3,2.8,24z"/> </svg> <script> // where to append the contents of our sneaky SVG var target = d3.select('.target'); // make a new SVG element in our target div var svg = target.append('svg'); // select our sneaky / hidden svg var sneaky = d3.select('#sneaky'); // get the sneaky svg's path var icon = sneaky.select('path'); // add it to the target svg; var newIcon = svg.append('path') .attr({ d: icon.attr('d'), fill: 'red', transform: 'scale(7)' }); </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js