31:T4d8,demoPointsAlongShape = { const boxWidth = width; const boxHeight = 400; const xmlns = 'http://www.w3.org/2000/svg'; const s = svg`` const randomiseRadius = demoPointsAlongShapeOptions.includes("Randomise radius") const randomiseDistance = demoPointsAlongShapeOptions.includes("Randomise distance") for (const path of path2.paths) { const svgPath = svg`` s.appendChild(svgPath) const totalLength = svgPath.getTotalLength() for (let i = 0; i < demoPointsAlongShapeSubdivisions; i ++) { const radius = randomiseRadius ? Math.random() * 6 + 1 : 4 const distance = randomiseDistance ? i * totalLength / demoPointsAlongShapeSubdivisions + Math.random() * totalLength / demoPointsAlongShapeSubdivisions : i * totalLength / demoPointsAlongShapeSubdivisions const point = svgPath.getPointAtLength(distance) const circle = svg`` s.appendChild(circle) } } return s }32:T410,#### Vectors Vectors are super useful when it comes to graphics, they allow you to manipulate points however you want. If you had a look at my [notebook about rounding polygon corners](https://observablehq.com/@daformat/rounding-polygon-corners), you'll already know why. But if you didn't, and don't know about how useful vectors are, here is a recap: - A vector is an abstract data type used to represent properties that have both direction and magnitude - Many useful data can be derived out of a vector: the normal and unit vector are derived vectors of magnitude (length) 1 and are used to project distances along, or perpendicular to a given vector. The unit vector has the same direction as the original vector, whereas the unit vector is perpendicular to it - As soon as you get a set of two points, you can get a vector out of it in order to do further spatial computations: let's say you want to get a point perpendicular to a vector and at a certain distance, you'd use the normal vector to translate the original point for that33:T5e8,demoTranslatePoints = { const boxWidth = width; const boxHeight = 400; const xmlns = 'http://www.w3.org/2000/svg'; const s = svg`` const randomiseRadius = demoTranslatePointsOptions.includes("Randomise radius") const randomiseDistance = demoTranslatePointsOptions.includes("Randomise distance") for (const path of path3.paths) { const svgPath = svg`` s.appendChild(svgPath) const totalLength = svgPath.getTotalLength() for (let i = 0; i < demoTranslatePointsSubdivisions; i ++) { const radius = randomiseRadius ? Math.random() * 6 + 1 : 4 const distance = randomiseDistance ? i * totalLength / demoTranslatePointsSubdivisions + Math.random() * totalLength / demoTranslatePointsSubdivisions : i * totalLength / demoTranslatePointsSubdivisions const point = svgPath.getPointAtLength(distance) // Specific to this demo: get a vector and use it to translate the center const point2 = svgPath.getPointAtLength(distance + 0.1) const vector = vec(point, point2) const translatedCenter = translate(point, vector.normal, radius, 1) const circle = svg`` s.appendChild(circle) } } return s }34:T8bf,demoInFill = { const boxWidth = width; const boxHeight = 400; const xmlns = 'http://www.w3.org/2000/svg'; const s = this || svg`` // Specfific to this demo: we need to yield the svg first so we can use isPointInFill yield s s.innerHTML = "" const randomiseRadius = demoInFillOptions.includes("Randomise radius") const randomiseDistance = demoInFillOptions.includes("Randomise distance") const drawInside = demoInFillOptions.includes("Draw inside") for (const path of path4.paths) { const svgPath = svg`` s.appendChild(svgPath) const totalLength = svgPath.getTotalLength() for (let i = 0; i < demoInPathSubdivisions; i ++) { // Radius let radius = randomiseRadius ? Math.random() * 6 + 1 : 4 // Distribute points const distance = randomiseDistance ? i * totalLength / demoInPathSubdivisions + Math.random() * totalLength / demoInPathSubdivisions : i * totalLength / demoInPathSubdivisions const point = svgPath.getPointAtLength(distance) // Get a vector and use it to translate the center const point2 = svgPath.getPointAtLength(distance + 0.1) const vector = vec(point, point2) let translatedCenter = translate(point, vector.normal, radius, 1) // Specific to this demo: make sure we're inside or outside const svgPoint = s.createSVGPoint(); svgPoint.x = translatedCenter.x; svgPoint.y = translatedCenter.y; const inFill = svgPath.isPointInFill(svgPoint) if (inFill && !drawInside || !inFill && drawInside) { translatedCenter = translate(point, vector.normal, radius, -1) } const shape = () => svg`` while ( radius > 1 && isOverlappingFill(s, svgPath, plotSvgGeometryElement(s, shape(), 10), !drawInside) ) { radius *= 0.9 } const circle = shape() s.appendChild(circle) } } return s }35:T738,function drawShape(host, path, animation) { const colorChanged = path?.palette?.join(",") !== palette.current.join(",") const random = randomise === "each" const g = !random && path.g || svg`` g.setAttribute("class", "") host.appendChild(g) if (!path.g || random) { const rect = svg`` g.appendChild(rect) path.paths.forEach(p => { const svgPath = svg`` const totalLength = svgPath.getTotalLength() const factor = totalLength > 200 ? 1 : totalLength > 150 ? 0.6 : 0.8 const intersections = [ ~~(totalLength / 4.6875 * factor), ~~(totalLength / 6.25 * factor), ~~(totalLength / 6.25 * factor), ~~(totalLength / 9.375 * factor), ~~(totalLength / 9.375) ] distribute( g, p, intersections[0], () => ~~(Math.random() ** 2 * 8 * factor) + 4, () => 1 ) distribute( g, p, intersections[1], () => ~~(Math.random() ** 2 * 5 * factor) + 1, () => 3 ) distribute( g, p, intersections[2], () => ~~(Math.random() ** 2 * 3) + 1, () => Math.max(Math.random() * 9 * factor, 1) ) distribute( g, p, intersections[3], () => ~~(Math.random() ** 2 * 5 * factor) + 1, () => Math.max((Math.random() * 2 + 2) * factor, 1) ) distribute( g, p, intersections[4], () => ~~(Math.random() * Math.random() * 2) + 1, () => Math.max(Math.random() * 9 * factor, 1) ) }) path.g = g } else if (colorChanged) { recolorGroup(g) } path.palette = palette.current g.classList.add(animation) // keep this at the end to prevent Safari from freezing the animations return g }36:T6f3,function distribute(host, path, intersections, getRadius, getRelativeDistance = (radius) => 1) { const svgPath = svg`` host.appendChild(svgPath) const totalLength = svgPath.getTotalLength() const evenDistance = 1 / intersections * totalLength for (var i = 0; i < intersections; i ++){ // Intial circle parameters let distance = i * evenDistance + Math.random() * 0.5 * evenDistance let point = getPointAndVecAtLength(svgPath, distance) let radius = getRadius() const relativeDistance = getRelativeDistance(radius) // Translate center point let offsetPoint = translate(point, point.v.normal, radius * relativeDistance, 1) const svgPoint = host.parentElement.createSVGPoint(); svgPoint.x = offsetPoint.x; svgPoint.y = offsetPoint.y; const inFill = svgPath.isPointInFill(svgPoint) if (path.direction === "inside" && !inFill || inFill) { offsetPoint = translate(point, point.v.normal, radius * relativeDistance, -1) } // Adjust radius so the circle doesn't overlap with the path fill shape // (or is strictly contained in it in the case of an inside direction) const shape = () => svg`` const plot = () => plotSvgGeometryElement(host, shape(), 10) const overlaping = () => isOverlappingFill(host.parentElement, svgPath, plot(), path.direction !== "inside") while (radius > 1 && overlaping()) { radius *= 2/3 } // Add the final circle let percentage = distance / totalLength const color = getColor(percentage) const opacity = (~~(Math.random() * 6) + 3) / 10 addCircle(host, percentage, offsetPoint.x, offsetPoint.y, radius, color, opacity) } }37:T15fc,paths=[ { name: "Star", paths: [ { d: "M141.743 80.4016H141.864C152.853 82.0117 155.872 91.3506 147.942 99.0793L147.902 99.1195C132.726 113.893 132.163 115.624 135.625 136.515V136.636C137.436 147.545 129.466 153.261 119.725 148.028C101.449 138.246 98.9536 138.246 80.6382 147.947L80.4369 148.068C70.6151 153.261 62.6851 147.504 64.577 136.555V136.475C68.1998 115.825 67.5155 113.772 52.5009 99.1195L52.4606 99.0793C44.5307 91.3506 47.5497 82.0117 58.5389 80.4016H58.6597C79.4708 77.3423 80.92 76.2554 90.3393 57.457C95.2905 47.5143 105.112 47.5143 110.064 57.457C119.483 76.2554 120.932 77.3423 141.743 80.4016Z" } ] }, { name: "Cross", paths: [ { d: "M117.485 55.6154L115.563 57.5368C107.032 66.0679 93.3135 66.1063 84.744 57.6137L82.592 55.5386C75.0985 48.1219 63.0705 48.1603 55.6154 55.6154C48.1988 63.0321 48.1988 75.0985 55.6154 82.5152L57.5368 84.4366C66.0679 92.9676 66.1063 106.687 57.6137 115.256L55.5386 117.408C48.1219 124.901 48.1603 136.93 55.6154 144.385C63.0705 151.84 75.0985 151.878 82.592 144.461L84.744 142.386C93.3135 133.894 107.032 133.932 115.563 142.463L117.485 144.385C124.901 151.801 136.968 151.801 144.385 144.385C151.84 136.93 151.878 124.901 144.461 117.408L142.386 115.256C133.894 106.687 133.932 92.9676 142.463 84.4366L144.385 82.5152C151.801 75.0985 151.801 63.0321 144.385 55.6154C136.968 48.1988 124.901 48.1988 117.485 55.6154Z" } ] }, { name: "Bolt", paths: [ { d: "M68.4298 120.005C82.3345 117.469 91.2762 126.279 89.0515 140.29L88.3241 144.717C86.9123 153.613 95.8968 157.438 101.288 150.218L142.189 95.25C148.692 86.5257 143.258 77.7583 132.605 79.8212C118.743 82.4858 109.759 73.7185 111.983 59.7079L112.711 55.3243C114.165 46.3851 105.138 42.5601 99.7045 49.7802L58.8463 104.447C52.3005 113.214 57.6912 121.982 68.4298 120.005Z" } ] }, { name: "Heart", paths: [ { d: "M81.0912 135.153L81.0014 135.092C80.9303 135.043 80.8368 134.979 80.7225 134.9C80.494 134.743 80.1812 134.526 79.7961 134.257C79.0275 133.72 77.9608 132.966 76.6931 132.049C74.1954 130.242 70.7441 127.676 67.1878 124.801C63.8115 122.071 59.5075 118.397 55.7628 114.413C53.9288 112.462 51.4503 109.622 49.2314 106.129C47.5987 103.558 43 95.976 43 85.5C43 66.9985 57.9985 52 76.5 52C85.6555 52 93.9531 55.6728 100 61.6253C106.047 55.6728 114.345 52 123.5 52C142.002 52 157 66.9985 157 85.5C157 95.976 152.401 103.558 150.769 106.129C148.55 109.622 146.071 112.462 144.237 114.413C140.492 118.397 136.189 122.071 132.812 124.801C129.256 127.676 125.805 130.242 123.307 132.049C122.039 132.966 120.973 133.72 120.204 134.257C119.819 134.526 119.506 134.743 119.277 134.9C119.163 134.979 119.07 135.043 118.999 135.092L118.909 135.153L118.858 135.188L118.854 135.191C118.854 135.191 102 148.027 100 148.027C98 148.027 81.1465 135.191 81.1465 135.191L81.1415 135.188L81.0912 135.153Z" } ] }, { name: "Location", paths: [ { d: "M69.5944 60.6173C86.387 43.7942 113.613 43.7942 130.406 60.6173C139.733 69.9617 143.879 82.5309 142.845 94.7424C141.151 114.739 125.487 130.665 111.163 144.721C106.882 148.921 102.792 152 100 152C97.2082 152 93.1181 148.921 88.8374 144.721C74.5132 130.665 58.8487 114.739 57.1549 94.7424C56.1205 82.5309 60.267 69.9617 69.5944 60.6173Z" }, { d: "M117 94C117 103.389 109.389 111 100 111C90.6112 111 83 103.389 83 94C83 84.6112 90.6112 77 100 77C109.389 77 117 84.6112 117 94Z", direction: "inside" } ] }, { name: "Speech bubble", paths: [ { d: "M100 135.909C129.271 135.909 153 117.573 153 94.9545C153 72.336 129.271 54 100 54C70.7289 54 47 72.336 47 94.9545C47 107.543 54.35 118.805 65.9148 126.317C68.395 127.929 70.1917 130.696 69.2135 133.487C67.9467 137.102 67.8505 138.323 64.5 139.5C62 140.378 61.5 144.449 64.5 145.5C73.3806 148.613 80.6746 145.799 87.5571 140.378C90.8962 137.748 94.9324 135.855 99.1828 135.904C99.4547 135.907 99.7271 135.909 100 135.909Z" } ] }, { name: "Observable", paths: [ { d: "M148 100C148 127.612 126.284 150 99.5 150C72.7159 150 51 127.612 51 100C51 72.3875 72.7159 50 99.5 50C126.284 50 148 72.3875 148 100Z" }, { d: "M99.5 133.333C95.0217 133.333 91.1417 132.367 87.86 130.433C84.59 128.508 81.9756 125.78 80.3142 122.559C78.5479 119.208 77.2549 115.665 76.4665 112.015C75.6301 108.057 75.2226 104.032 75.25 100C75.25 96.8073 75.4602 93.7554 75.8845 90.8369C76.3049 87.9223 77.0849 84.9592 78.2207 81.9518C79.3563 78.9444 80.8194 76.337 82.6018 74.1259C84.4574 71.8607 86.8567 70.0168 89.6141 68.737C92.5079 67.3555 95.7977 66.6667 99.5 66.6667C103.978 66.6667 107.858 67.6333 111.14 69.5667C114.41 71.4923 117.024 74.2205 118.686 77.4407C120.44 80.7555 121.721 84.2704 122.534 87.985C123.342 91.6962 123.75 95.7038 123.75 100C123.75 103.193 123.54 106.245 123.116 109.163C122.663 112.193 121.864 115.172 120.731 118.048C119.559 121.055 118.104 123.663 116.35 125.874C114.596 128.085 112.276 129.882 109.386 131.263C106.496 132.645 103.202 133.333 99.5 133.333Z", direction: "inside" }, { d: "M102.638 111.712C99.4398 112.615 96.0209 112.196 93.1912 110.553C90.2399 109.005 88.3181 106.565 87.4258 103.235C86.5336 99.9055 86.971 96.805 88.737 93.9297C90.5042 91.0587 93.0453 89.177 96.3617 88.2883C99.5418 87.3839 102.943 87.7713 105.786 89.3615C108.753 90.9686 110.682 93.435 111.574 96.7649C112.466 100.095 112.029 103.196 110.263 106.071C108.496 108.941 105.955 110.823 102.638 111.712Z", direction: "outside" } ] } ]38:Td4d,39:T7e9,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); if (title) form.append( html`${title}` ); form.append( html`` ); if (description) form.append( html`

${description}

` ); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3a:T7c1,function slider(config = {}) { let { min = 0, max = 1, value = (max + min) / 2, step = "any", precision = 2, title, description, disabled, getValue, format, display, submit, animates, animateValue, useAnimatedValueOnInit } = typeof config === "number" ? { value: config } : config; precision = Math.pow(10, precision); if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision; const form = input({ type: "range", title, description, submit, format, display, attributes: { min, max, step, disabled, value }, getValue }); let frame; const defaultAnimatedValue = (t) => { return form.input.value + ( step !== 'any' ? step : (max - min) / 10000 ); }; animateValue = animateValue || defaultAnimatedValue; const update = () => { form.input.value = animateValue(new Date().getTime()); form.input.dispatchEvent(new CustomEvent("input", {bubbles: true})); form.input.style.setProperty("--min", `${form.input.min}`) form.input.style.setProperty("--max", `${form.input.max}`) form.input.style.setProperty("--value", `${form.input.valueAsNumber}`) } const tick = () => { update(); frame = requestAnimationFrame(tick); } const start = () => { frame = requestAnimationFrame(tick); } const stop = () => { if (frame !== null) cancelAnimationFrame(frame), frame = null; } if (animates) { update(); start(); } else if (useAnimatedValueOnInit) { form.input.value = animateValue(new Date().getTime()); form.input.dispatchEvent(new CustomEvent("input", {bubbles: true})); form.input.style.setProperty("--min", `${form.input.min}`) form.input.style.setProperty("--max", `${form.input.max}`) form.input.style.setProperty("--value", `${form.input.valueAsNumber}`) } disposal(form).then(stop); return form; }3b:Tb35,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false, onTogglePlayState = (playing) => {} } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { onTogglePlayState(true) form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { onTogglePlayState(false) form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); form.i.style.setProperty("--min", `${form.i.min}`) form.i.style.setProperty("--max", `${form.i.max}`) form.i.style.setProperty("--value", `${form.i.valueAsNumber}`) }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }3c:[] 2f:{"title":"Stencil all the things! Distributing circles around a shape","cells":[{"id":0,"value":"# Stencil all the things!
Distributing circles around a shape\n\nInspired by [a tweet form Chris Gannon](https://twitter.com/ChrisGannon/status/1462038901477060613), I decided to explore this stencil effect by recreating it in a generative way. Instead of manually placing and colorizing each circle, I wanted to be able to dynamically generate them given any svg path.\n\nIn this notebook we'll learn how use the svg APIs, sprinkled with some vector math, to randomly distribute shapes along any given path. Let's stencil all the things!","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"result = {\n const boxWidth = width;\n const boxHeight = 400;\n const xmlns = 'http://www.w3.org/2000/svg'; \n const s = this || svg``\n if (!this?.preset || this.preset === preset || !state.playing) {\n s.innerHTML = \"\"\n s.appendChild(style)\n const prevGroup = this && this.prevGroup.cloneNode(true)\n if (prevGroup) {\n prevGroup.classList.remove(\"in\")\n prevGroup.classList.add(\"out\")\n s.appendChild(prevGroup)\n }\n yield s\n s.prevGroup = drawShape(s, path, \"in\")\n }\n s.preset = preset\n yield s\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof path = Scrubber(\n paths,\n {\n delay: 2350,\n initial: paths.length - 1,\n loopDelay: 0,\n format: (val) => val.name,\n onTogglePlayState: (plays) => state.playing = plays\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"viewof height = slider({\n min: 300,\n max: 800,\n step: 1,\n value: 500,\n title: \"Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"viewof randomise = radio({\n options: [\n {label: \"Randomise position each time\", value: \"each\"},\n {label: \"Randomise only first time\", value: \"first\"}\n ],\n value: \"first\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"viewof preset = {\n const options = Object.keys(presets).map(k => ({value: k, label: k}))\n return radio({\n options,\n value: options[0].value\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"palette = {\n const size = 128\n const palette = new Array(size)\n .fill(\"\")\n .map((p, i) => getColor(i / (size - 1)))\n const s = palette.map((p, i) => html``)\n const r = html`

${s}

`\n r.current = palette\n return r\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"viewof range = slider({\n min: 0,\n max: 360,\n step: 1,\n value: presets[preset].range,\n title: \"Color range\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"viewof startHue = slider({\n min: 0,\n max: 360,\n step: 1,\n value: presets[preset].start,\n title: \"Start hue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"viewof endHue = slider({\n min: 0,\n max: 720,\n step: 1,\n value: startHue + range,\n title: \"End hue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"viewof saturation = slider({\n min: 0,\n max: 100,\n step: 1,\n value: presets[preset].saturation,\n title: \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"viewof lightness = slider({\n min: 0,\n max: 100,\n step: 1,\n value: presets[preset].lightness,\n title: \"Lightness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1136,"value":"## Learning how to fish\nNow, in the end, this effect is pretty simple. If you think about it, it all comes down to three things:\n1. Get points along an arbitrary SVG shape\n2. Translate points inside or outside the SVG shape, which implies to know if an SVG shape is inside or outside another\n3. Generating a nice symmetrical gradient to colorize the circles\n\nNote that we are using circles, but with a little bit more work it's perfectly doable with any other arbitrary shape too!","pinned":false,"hidden":false,"mode":"md"},{"id":1168,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1158,"value":"### Getting points along arbitrary SVG shapes, paths etc.\nSVG is plain awesome, and if you ever need to go deeper than just rendering SVGs straight out of Figma or from your favorite SVG authoring package, you'll soon realize it has a very useful API which you can tap into.\n\nTwo very useful methods in the SVGGeometryElement API are:\n- `SVGGeometryElement.getTotalLength()`\n- `SVGGeometryElement.getPointAtLength(length)`\n\nThey both are pretty explicit, the first one give you the total length of any `SVGGeometryElement`, and the second one gives you a point (with its coordinates) at any given length along the `SVGGeometryElement`. With these two methods, you basically have everything you need to distribute points along any shape:","pinned":false,"hidden":false,"mode":"md"},{"id":1177,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"md`_**fig 1** • Distributing points along arbitrary shapes_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"viewof demoPointsAlongShapeOptions = Inputs.checkbox([\"Randomise radius\", \"Randomise distance\"], {value: [\"Randomise radius\", \"Randomise distance\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"viewof path2 = Scrubber(\n paths,\n {\n delay: 2250,\n initial: paths.length - 1,\n loopDelay: 0,\n format: (val) => val.name,\n onTogglePlayState: (plays) => state.playing = plays\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"viewof demoPointsAlongShapeSubdivisions = slider({\n min: 0,\n max: 42,\n step: 1,\n value: 32,\n title: \"Subdivisions\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1237,"value":"### Translating points inside or outside the shape\nThis is already pretty cool, but as you probably noticed, the circle centers are positioned on the path outline itself. If we want to be able to really draw the shapes like a stencil would look like, we need a way to position our circles either strictly outside or strictly inside of the shape.\n\nFor this purpose we need to do two things:\n1. Translate the circle inside or outside, for this we'll be using vectors\n2. Scale its radius so the circle doesn't overlap the shape at all, or so that it doesn't expand outside the shape in the case want an inner fill","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1247,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":741,"value":"vectorDemo","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"md`_**fig 2** • Vector representation_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"function vec(p1, p2) {\n // Returns a ( p1 o-> p2 ) vector object\n // given p1 and p2 objects with the shape {x: number, y: number}\n\n // horizontal and vertical vector components\n const dx = p2.x - p1.x;\n const dy = p2.y - p1.y;\n \n // magnitude of the vector (distance)\n const mag = Math.hypot(dx, dy); \n \n // unit vector\n const unit = (\n mag !== 0 \n ? { x: dx / mag, y: dy / mag }\n : { x: 0, y: 0 }\n );\n \n // normal vector\n const normal = rotate(\n unit,\n { x: 0, y: 0 },\n Math.PI /2\n );\n \n // Angle in radians\n const radians = Math.atan2(dy, dx);\n // Normalize to clock-wise circle\n const normalized = 2 * Math.PI + Math.round(radians) % (2 * Math.PI)\n // Angle in degrees\n const degrees = 180 * radians / Math.PI;\n const degreesNormalized = ( 360 + Math.round(degrees) ) % 360; \n\n return {\n dx, dy,\n mag, unit, normal,\n p1: {...p1},\n p2: {...p2},\n angle: {\n radians,\n normalized,\n degrees,\n degreesNormalized\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function translate(point, vec, length = 1, direction = 1) {\n const resultingPoint = {}\n resultingPoint.x = point.x + vec.x * direction * length;\n resultingPoint.y = point.y + vec.y * direction * length;\n return resultingPoint\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":" function rotate(point, center, radians) {\n const cos = Math.cos(radians),\n sin = Math.sin(radians),\n nx = (cos * (point.x - center.x)) + (sin * (point.y - center.y)) + center.x,\n ny = (cos * (point.y - center.y)) - (sin * (point.x - center.x)) + center.y;\n return {x: nx, y: ny};\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1261,"value":"#### Using vectors to translate our circles outside or inside the shapes\nSo how do we get a vector at any given point in our example? Simple enough, all you have to is to request another point along the shape close enough to the original point so that the resulting vector is tangent to the path\n\nThe general idea is to get both `SVGGeometryElement.getPointAtLength(length)` and `SVGGeometryElement.getPointAtLength(length + 1)` and use the resulting points to construct our vector _tangent_ to the shape\n\nWe can then use the _normal_ vector, which is _perpendicular_ to the vector we just got and use it to translate the circle center by the distance we're interested in. In our case the distance is the circle radius. We can of course add some randomness to it so we get a more organic effect","pinned":false,"hidden":false,"mode":"md"},{"id":1272,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"md`_**fig 3** • Translating the circles inside and outside the shape_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"viewof demoTranslatePointsOptions = Inputs.checkbox([\"Randomise radius\", \"Randomise distance\"], {value: [\"Randomise radius\", \"Randomise distance\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"viewof path3 = Scrubber(\n paths,\n {\n delay: 2250,\n initial: paths.length - 1,\n loopDelay: 0,\n format: (val) => val.name,\n onTogglePlayState: (plays) => state.playing = plays\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"viewof demoTranslatePointsSubdivisions = slider({\n min: 0,\n max: 42,\n step: 1,\n value: 42,\n title: \"Subdivisions\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1303,"value":"#### Scale the circle and make sure it's either inside our outside the svg shape\n\nLooking pretty cool already! Although you might have noticed two things:\n\n1. The direction of our translation depends on the shape (some shapes are filled inside, some are filled outside)\n2. Depending on if you want the circles inside or outside, parts of the shape that are convex or concave can result in circles being overlapping other parts of the original shape\n\nWe can fix those, thanks again the `SVGGeometryElement` API, we can use `SVGGeometryElement.isPointInFill(point)` for these two concerns: \n\n- if the center is in the fill area of our original shape after translating it, it means that we are inside and that we can reverse the direction of the translation\n- if we subdivide our circle edges into enough points, we can use them to make sure the overall shape is or isn't inside the original shape, and scale the radius accordingly until we're satisfied","pinned":false,"hidden":false,"mode":"md"},{"id":1313,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"md`_**fig 4** • Placing shapes inside or outside an svg path_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"viewof demoInFillOptions = Inputs.checkbox([\"Draw inside\", \"Randomise radius\", \"Randomise distance\"], {value: [\"Randomise radius\", \"Randomise distance\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"viewof path4 = Scrubber(\n paths,\n {\n delay: 2250,\n initial: paths.length - 1,\n loopDelay: 0,\n format: (val) => val.name,\n onTogglePlayState: (plays) => state.playing = plays\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"viewof demoInPathSubdivisions = slider({\n min: 0,\n max: 42,\n step: 1,\n value: 42,\n title: \"Subdivisions\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1399,"value":"### Generating a symmetrical gradient\n\nUsing hsl colors, it's pretty trivial to generate a mirrored symmetric gradient: we basically have to get a hue range (it's expressed as degrees across the color wheel) and reverse it. To do this, we can write a simple function that takes a ratio as the input argument, and returns the matching color, taking care of reversing the gradient at 50%.\n\nThe function is left opened after the demo, play with the sliders to customize the generated colors","pinned":false,"hidden":false,"mode":"md"},{"id":1427,"value":"palette2 = {\n const size = subdivisions2\n const palette = new Array(size)\n .fill(\"\")\n .map((p, i) => getColorDemo(i / (size - 1)))\n const s = palette.map((p, i) => html``)\n const r = html`

${s}

`\n r.current = palette\n return r\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"viewof range2 = slider({\n min: 0,\n max: 360,\n step: 1,\n value: 180,\n title: \"Color range\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"viewof startHue2 = slider({\n min: 0,\n max: 360,\n step: 1,\n value: 180,\n title: \"Start hue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"viewof endHue2 = slider({\n min: 0,\n max: 720,\n step: 1,\n value: startHue2 + range2,\n title: \"End hue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"viewof saturation2 = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 84,\n title: \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"viewof lightness2 = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 62,\n title: \"Lightness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"viewof subdivisions2 = slider({\n min: 7,\n max: 128,\n step: 1,\n value: 32,\n title: \"Subdivisions\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"function getColorDemo(percentage) {\n const start = startHue2\n const end = endHue2\n const distance = end - start\n const hue =\n percentage < 0.5\n ? start + distance * percentage * 2\n : end - distance * (percentage - 0.5) * 2\n return `hsl(${hue}, ${saturation2}%, ${lightness2}%)`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1266,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1462,"value":"## That's it!\nWe learned how to distribute our shapes along arbitrary svg elements, place them inside, or outside the svg path, and colorize the output the way we wanted. It's now super easy to add more shapes and get a nice generative stencil effect using svg and javascript\n\nIf you're curious, the circle animations are done with simple css keyframes which you can find below.\n\nSvg is a wonderful tool, and this was the occasion to learn a bit more about some of the javascript APIs provided natively, use some vector math, and get a fancy looking demo along the way :)\n\nLet me know if you have any suggestions, improvements, or better ways to do the things I'm doing.\n\nIn the mean time, happy coding on Observable!","pinned":false,"hidden":false,"mode":"md"},{"id":1466,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1472,"value":"md`\n## Want some more?\nLearn [how to round polygon corners using svg and javascript](https://observablehq.com/@daformat/rounding-polygon-corners)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"## Main demo resources","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"function getPointAndVecAtLength(svgPath, length) {\n const totalLength = svgPath.getTotalLength()\n const resolution = 1024\n const p1 = svgPath.getPointAtLength(length)\n const p2 = svgPath.getPointAtLength(Math.min(length + totalLength / resolution, totalLength))\n const v = vec(p1, p2)\n return {\n x: p1.x,\n y: p1.y,\n v: v\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"function isOverlappingFill(host, shape, points, overlapping = true) {\n return points.some(p => {\n const svgPoint = host.createSVGPoint();\n svgPoint.x = p.x;\n svgPoint.y = p.y;\n return overlapping ? shape.isPointInFill(svgPoint) : !shape.isPointInFill(svgPoint)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"function plotSvgGeometryElement(host, element, subdivisions) {\n // The element needs to be rendered for getTotalLength and getPointAtLength to work\n host.appendChild(element)\n const totalLength = element.getTotalLength()\n const evenDistance = 1 / subdivisions * totalLength\n const points = []\n for (var i = 0; i < subdivisions; i++){\n const distance = i * evenDistance\n const point = element.getPointAtLength(distance)\n const {x, y} = point\n points.push({x, y})\n }\n host.removeChild(element)\n return points\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"/**\n * Unused - plot a circle with however many points you want\n * Instead of this method, we're using the svg API to plot any SVGGeometryElement\n * @see plotSvgGeometryElement()\n */\nfunction plotCircle(center, radius, subidivsions = 8, precision= 4) {\n const points = []\n for (let i = 0; i < subidivsions; i++) {\n const x = + (center.x + radius * Math.cos(2 * Math.PI * i / subidivsions)).toFixed(precision)\n const y = + (center.y + radius * Math.sin(2 * Math.PI * i / subidivsions)).toFixed(precision)\n points.push({x, y})\n }\n return points\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"function addCircle(host, percentage, x, y, radius = 5, color = \"black\", opacity = 0.5) {\n let circle = svg`\n `;\n host.appendChild(circle);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"function getColor(percentage) {\n const start = startHue // 55\n const end = endHue\n const distance = end - start\n const hue =\n percentage < 0.5\n ? start + distance * percentage * 2\n : end - distance * (percentage - 0.5) * 2\n return `hsl(${hue}, ${saturation}%, ${lightness}%)`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"function recolorGroup(g) {\n const circles = g.querySelectorAll(\"circle\")\n Array.from(circles).forEach((circle, i) => {\n const percentage = circle.style.getPropertyValue(\"--percentage\")\n circle.setAttribute(\"fill\", getColor(percentage))\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"presets = {\n return {\n [\"Half rainbow\"]: {range: 180, start: 180, saturation: 84, lightness: 62},\n [\"Trichromatic\"]: {range: 100, start: 300, saturation: 84, lightness: 62},\n [\"Trichromatic 2\"]: {range: 75, start: 160, saturation: 84, lightness: 62},\n [\"Rainbow\"]: {range: 300, start: 60, saturation: 84, lightness: 62},\n [\"Autumn\"]: {range: 180, start: 300, saturation: 84, lightness: 62},\n [\"Monochromatic\"]: {range: 15, start: 300, saturation: 84, lightness: 0}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"state = {\n return {\n initial: paths.length - 1,\n playing: true\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"resize = {\n result.setAttribute(\"height\", height)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"## Animation & styles","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"$38","pinned":false,"hidden":false,"mode":"html"},{"id":378,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1516,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1520,"value":"## Misc","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"import {vectorDemo} from \"@daformat/rounding-polygon-corners\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}