Mr. Jingles and mask
md`# Mr. Jingles and [mask](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask)
Applying a mask to an SVG image`
chart = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "60%")
.style("height", "auto")
.style("font", "10px sans-serif");
svg.append("mask")
.attr("id", "myMask")
// Everything under a black pixel will be invisible
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "black");
svg.select("#myMask")
// Everything under a white pixel will be visible
.append("circle")
.attr("cx", 100)
.attr("cy", 110)
.attr("r", 100)
.attr("fill", "white");
svg.append("image")
.attr("x", 0)
.attr("y", 0)
.attr("width", 250)
.attr("xlink:href", 'https://raw.githubusercontent.com/aaronxhill/standd/master/jj.jpg')
.attr("mask", "url(#myMask)");
return svg.node();
}
width = 300;
height = 300;
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
