2e:null 2f:["$","title",null,{"children":"css mix-blend-mode | Sundar Singh | Observable"}] 34:[] 32:{"id":"e88508cc22f7868b","slug":"css-mix-blend-mode","title":"css mix-blend-mode","thumbnail":"9430b489f8f12e4e06e3ef1fe009702c67995432334a153d585f55950bec339f","access_level":"public","create_time":"$D2022-12-12T21:00:44.384Z","update_time":"$D2022-12-12T21:51:22.698Z","view_time":null,"first_public_time":"$D2022-12-12T21:47:41.109Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"956970941b62fd35","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":"starter_2024"},"version":161,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null}],"members":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"38a5b8064b86650d","slug":"css","title":"CSS","owner":{"id":"956970941b62fd35","login":"eesur","name":"Sundar Singh"}},"type":"notebook","body":{"title":"css mix-blend-mode","cells":[{"id":0,"value":"# css mix-blend-mode\n\nThe mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background. [[source](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)]\n\nThe below example is rendered with HTML divs that are rounded, and another version does the same but uses SVG elements\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"viewof blend = Inputs.select([\"normal\", \"screen\", \"multiply\", \"overlay\", \"darken\", \"lighten\", \"color-dodge\", \"color-burn\", \"hard-light\", \"soft-light\", \"difference\", \"exclusion\", \"hue\", \"saturation\", \"color\", \"luminosity\"], {label: \"Select mix-blend-mode:\", value: \"screen\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof circle1 = Inputs.color({label: \"circle 1\", value: \"#f20000\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"viewof circle2 = Inputs.color({label: \"circle 2\", value: \"#00d973\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof circle3 = Inputs.color({label: \"circle 3\", value: \"#0d75ff\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"\n\n

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof radius = Inputs.range([80, 360], {label: \"Radius:\", step: 1, value: 200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"----\n\nsvg version of the same:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"