D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jasondavies
Full window
Github gist
Clipping Self-Intersections
<!DOCTYPE html> <style> path { stroke: #ccc; fill: none; } path.clip { stroke: #fff; fill: #fc0; } </style> <body> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 500; var polygon = { type: "Polygon", coordinates: [[ [-30, -30], [-30, 30], [ 10, -10], [-20, 10], [-20, -20], [ 20, -20], [ 20, 10], [-10, -10], [ 30, 30], [ 30, -30], [-30, -30] ]] }; var path = d3.geo.path().projection(d3.geo.mercator().translate([width / 2, height / 2]).scale(width)); var svg = d3.select("body").append("svg"); svg.append("path") .datum(polygon) .attr("d", path); var circle = d3.geo.circle().origin([0, -90]); var clipPath = svg.append("path").attr("class", "clip"); d3.timer(function(elapsed) { clipPath .datum(circle.angle(45 + elapsed / 100).clip(polygon)) .attr("d", path); }); </script>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js