31:[] 2f:{"title":"SVG with a transparent hole","cells":[{"id":0,"value":"# SVG with a transparent hole","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"## Method 1: Using evenodd Fill-Rule\n\nThe evenodd fill-rule allows you to create a shape with a hole by defining an outer path and an inner path, where the inner path creates a transparent cutout.","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":13,"value":"### Explanation:\n- The outer path (first M and C commands) defines the blob shape.\n- The inner path (second M and C commands) defines the hole.\n- `fill-rule=\"evenodd\"` ensures the inner path is subtracted, creating a transparent hole.\n- Adjust the coordinates in the d attribute to shape the blob and hole as desired.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"## Method 2: Using an SVG ``\nA mask allows you to define a transparent hole by combining shapes, where white areas are opaque and black areas are transparent.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":36,"value":"### Explanation:\nThe defines the transparency:\n- A white makes the entire area opaque by default.\n - A black creates a transparent hole.\n - The mask is applied to the blob path using mask=\"url(#holeMask)\".\n- You can replace the with any path (e.g., another blob) for a custom hole shape.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"Use [Blobmaker](https://www.blobmaker.app) for any blob you like. There is also a [Notebook version of Blobmaker](https://observablehq.com/@sophiamersmann/moving-blob). Plus, check out [How we made Blobmaker](https://blog.prototypr.io/how-we-made-blobmaker-d2c1985d484a) and [CSS Tricks on Blobs!](https://css-tricks.com/blobs/).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}