29:null 2a:["$","title",null,{"children":"SVG with a transparent hole | Martien van Steenbergen | Observable"}] 2f:[] 2d:{"id":"82d89819f1fd9b86","slug":"svg-with-a-transparent-hole","title":"SVG with a transparent hole","thumbnail":"c3741b89033bc2b496aed28680874378be20ea527f92d7e7c0ddae0674ed3ee7","access_level":"public","create_time":"$D2025-05-07T13:42:11.196Z","update_time":"$D2025-05-07T14:08:53.015Z","view_time":null,"first_public_time":"$D2025-05-07T14:09:42.364Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":81,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"},{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SVG with a transparent hole","cells":[{"id":0,"value":"# SVG with a transparent hole","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"