Circular images

[mbostock]

E.g. here, it’d be really nice to have an easy way to apply a circular clip to the image mark

Maybe rx/ry would work? Or maybe better, you specify an r option and then it works well with the dodge transform.

[Fil]

<style>svg image {clip-path: inset(0 0 0 0 round 50%);}

https://observablehq.com/@fil/spotify-pop-artists

Could be built-in as a "circular" option, or by supporting a clipPath option, or with a className (#1002).

[mbostock]

Oh wow, I had no idea it was so easy! Nice! I still think an r option would be nice to match the dodge transform. We could have it generate the clipPath style accordingly.

[Fil]

r would default width to 2r, and add this clip-path (#181, #1109)? sounds good!

[Fil]

Edit: <style>svg image {clip-path: circle();}

spec / good browser support.