2d:null 2e:["$","title",null,{"children":"Making Clouds Using SVG Filters | Corey Guastini | Observable"}] 33:[] 31:{"id":"b7a38f0cf0091809","slug":"making-clouds-using-svg-filters","title":"Making Clouds Using SVG Filters","thumbnail":"021174cc628f60ffc8727fc50702a86eb99839837af1ebe1b32f3e41f56182c9","access_level":"public","create_time":"$D2021-04-27T01:34:52.400Z","update_time":"$D2021-04-28T23:25:39.675Z","view_time":null,"first_public_time":"$D2021-04-27T02:24:03.334Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"da36068e9c88f131","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":"starter_2024"},"version":139,"publish_version":139,"role":null,"authored":false,"authors":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null}],"members":[{"type":"individual","id":"56bb3b86bffb2836","login":"cguastini","name":"Corey Guastini","avatar_url":"https://avatars-next.observableusercontent.com/7c6d91c2a664c9f78ab78b1e0bf2b539441aaa1d9430ae24e9886ce825f3c1b0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Making Clouds Using SVG Filters","cells":[{"id":0,"value":"md`# Making Clouds Using SVG Filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`I've come across some cool examples of generative art like [this notebook](https://observablehq.com/@karimdouieb/generative-painting) that aims to reproduce the look of water colors. The result doesn't look all that different from a cloud with its wispy edges. I'm a known fan of clouds, so I set out to find an example of generating clouds in the browser. I quickly stumbled upon [an article from CSS-TRICKS](https://css-tricks.com/drawing-realistic-clouds-with-svg-and-css/) that was pretty much exactly what I was looking for. It leveraged a clever trick utilizing the box-shadow CSS property for creating wispy cloud edges. That trick caused an artifact in the feDisplacementMap part of the SVG filter when viewed on mobile Safari, however. Luckily, a comment on the article proposed a [pure SVG method](https://codepen.io/ccprog/pen/EBPOEQ) (no reliance on box-shadow) that eliminates that bugginess. That method is reproduced here with some simplification and some added d3.js for creating many clouds at once.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof seed = Button(\"Generate Random Clouds\", {value: 123, reduce: () => { Math.random() }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"clouds = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n svg.append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", \"#292929\");\n \n const allClouds = svg.selectAll(\"ellipse\").data(cloudData);\n \n allClouds.enter().append(\"ellipse\")\n .attr(\"cx\", function(d) {\n return (Math.floor(random() * width));\n })\n .attr(\"cy\", function(d,i) {\n return (Math.floor(random() * height));\n })\n .attr(\"rx\", \"150\")\n .attr(\"ry\", \"50\")\n .attr(\"class\", \"cloud\")\n .style(\"fill\", d => d.color);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## SVG Filter Definition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"random = d3.randomLcg(seed);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"cloudData = {\n let data = [];\n for (let i=0; i<10; i++) {\n data.push({\n color:cloudColors(random())\n })\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"cloudColors = {\n return d3.scaleLinear().domain([0, 1])\n\t.range([\n\t\t\"#ffffff\",\n\t\t\"#bfbfbf\"\n\t]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"import {Button} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"