27:null 28:["$","title",null,{"children":"Data-driven Fill on a Closed Path SVG element | Observable Ambassadors | Observable"}] 2d:T556,{ const xOffset = 100 - perCentFilled; return html` `; } // fill="${contrast()}"2e:[] 2b:{"id":"23749efa8e5810f5","slug":null,"title":"Data-driven Fill on a Closed Path SVG element","thumbnail":"0aab5a17a71b0045e63cd8065df4ed9e1493c4049eb73845399aa69585211dde","access_level":"public","create_time":"$D2022-10-30T21:15:15.899Z","update_time":"$D2024-03-18T17:05:36.214Z","view_time":null,"first_public_time":"$D2022-10-30T22:31:46.035Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024"},"version":134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}],"members":[{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024","role":"editor"},{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Data-driven Fill on a Closed Path SVG element","cells":[{"id":0,"value":"# Data-driven [Fill](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill) on a [Closed Path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) SVG element\nA quick little [infographic](https://en.wikipedia.org/wiki/Infographic) using the [SVG linearGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof startColor = Inputs.color({ label: \"Start Color\", value: \"#ffffff\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof stopColor = Inputs.color({ label: \"Stop Color\", value: \"#00ff00\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof perCentFilled = Inputs.range([0, 100], {\n step: 1,\n label: \"Percent Filled\",\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof removeGradation = Inputs.toggle({\n label: \"Remove Gradation\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"