2a:null 2b:["$","title",null,{"children":"SVG clip-path and mask | Shreshth Mohan | Observable"}] 31:T570,32:[{"id":"01fb7abea01b83d1c8b3b386d4eeaff1c111cb98586bd74b2e1b043f3161e9459949a658f6af64357c4cd7758ed8fe6ab0c60a803fa1ba4ac87c294f3ee6f548","href":"https://static.observableusercontent.com/files/01fb7abea01b83d1c8b3b386d4eeaff1c111cb98586bd74b2e1b043f3161e9459949a658f6af64357c4cd7758ed8fe6ab0c60a803fa1ba4ac87c294f3ee6f548","name":"filename.png","type":"image/png","lastModified":1644428021978.963,"size":104221}] 2e:{"id":"f3916c7876dd3c87","slug":"svg-clip-path-and-mask","title":"SVG clip-path and mask","thumbnail":"ad8bb9385f67e395d34fa3a5aa25a72b8ddfaba5248da40d19ed8c860d883cdf","access_level":"public","create_time":"$D2022-02-09T10:57:05.794Z","update_time":"$D2022-03-20T19:05:25.899Z","view_time":null,"first_public_time":"$D2022-02-09T12:30:19.856Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":"starter_2024"},"version":352,"publish_version":352,"role":null,"authored":false,"authors":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null}],"members":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"9397850e71d523f3","slug":"svg-attributes","title":"SVG Attributes","owner":{"id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan"}},"type":"notebook","body":{"title":"SVG clip-path and mask","cells":[{"id":0,"value":"# SVG clip-path and mask","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"md`\n## mask and maskContentUnits\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"viewof circleInputs = Inputs.form({\n radius: Inputs.range([10, 45], {\n value: 45,\n step: 1,\n label: \"Circle radius\"\n }),\n xOffset: Inputs.range([0, 100], {\n value: 0,\n step: 1,\n label: \"Circle x offset\"\n }),\n yOffset: Inputs.range([0, 100], {\n value: 0,\n step: 1,\n label: \"Circle y offset\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"Mask Star Fill\n

","pinned":false,"hidden":false,"mode":"html"},{"id":270,"value":"viewof maskStarFill = Inputs.form({\n h: Inputs.range([1, 360], { step: 1, label: \"h\" }),\n s: Inputs.range([0, 100], { step: 1, label: \"s\" }),\n l: Inputs.range([0, 100], { value: 0, step: 1, label: \"l\" })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"Mask Base Fill\n

","pinned":false,"hidden":false,"mode":"html"},{"id":295,"value":"viewof maskBaseFill = Inputs.form({\n h: Inputs.range([1, 360], { step: 1, label: \"h\" }),\n s: Inputs.range([0, 100], { step: 1, label: \"s\" }),\n l: Inputs.range([0, 100], { value: 100, step: 1, label: \"l\" })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":42,"value":"md`\n- Note when you change the circle radius, the second circle's star doesn't scale accordingly. Same when you change the x or y offsets. This is because the first circle's mask has **maskContentUnits** = **objectBoundingBox** (scales and translates with and is relative to the shape). The second circle has **maskContentUnits** = **userSpaceOnUse**.\n- When **maskContentUnits** = **objectBoundingBox** the x and y values used should be normalized to 1.\n- 🤔 The way you control the opacity of the masks is a bit confusing. The colors used in fill attributes of the shapes in the mask determine the opacity of the mask. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`\n## clip-path\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof applyClipPath = Inputs.toggle({ label: \"Apply clip-path\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"viewof clipPathCircleRadius = Inputs.range([5, 100], {\n value: 30,\n label: \"clipPath circle radius\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof clipPathCircleCenterX = Inputs.range([5, 100], {\n value: 50,\n label: \"clipPath circle center x position\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof clipPathCircleCenterY = Inputs.range([5, 100], {\n value: 50,\n label: \"clipPath circle center y position\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":102,"value":"## More\n- [MDN: mask](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/mask) (mask star example was copied from MDN, then made interactive)\n- Images and clipPath inside SVG (different approaches, need to test browser support)\n - https://codepen.io/shreshthmohan/pen/QWONVKe\n - https://codepen.io/shreshthmohan/pen/vYePNmj\n- https://css-tricks.com/lodge/svg/33-clipping-masking/","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"function objToHslStr({ h, s, l }) {\n return `hsl(${h}, ${s}%, ${l}%)`;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"