29:null 2a:["$","title",null,{"children":"Drawing svg squircle shapes with javascript | Mathieu Jouhet | Observable"}] 2f:T434,md` # Drawing svg squircle shapes with javascript A squircle is a special case of [Lamé curves](https://en.wikipedia.org/wiki/Superellipse), also known as superellipses, or supercircles, and which can be described by the following parametric equation: ${tex` \left. \begin{aligned} x\left(t\right) &= \plusmn a\cos^{\frac{2}{n}} t \quad \\ y\left(t\right) &= \plusmn b\sin^{\frac{2}{n}} t \quad \end{aligned} \right \} \quad 0 \le t \le \frac{\pi}{2} `} where each ± can be chosen separately so that each value of *t* gives four points on the curve, with one on each quadrant. In a squircle, ${tex`a = b`} It's the shape used as a mask for iOS icons, with ${tex`n = 5`} (well, [almost](https://www.figma.com/blog/desperately-seeking-squircles/)). It's a circle, with ${tex`n = 2`}. An inflated diamond with ${tex`1 < n < 2`}. And a convex star with ${tex`n < 1`}. Here we plot the curve using **${resolution} points per quadrant** (\`resolution\` param) to create an approximation of the curve, adjust resolution based on your own needs. `30:Td44,squircles = { const s = DOM.svg(width, height); s.setAttributeNS(null, 'width', width); s.setAttributeNS(null, 'height', height); s.setAttributeNS(null, 'style', `width: 100%; height: auto; max-width: ${width}; box-sizing: border-box`); s.setAttribute('class', wiggle ? 'wiggle' : ''); // Filters const defs = DOM.element('svg:defs'); s.appendChild(defs); const blur = Math.min(12, lameWidth / 8); const offset = Math.min(4, lameWidth / 12); defs.appendChild(createGradient('gradient1', '#5AE0F2', '#70FFF2')); shadows && defs.appendChild(createDropShadowFilter('shadow1', '#5AE0F2', blur, offset, offset)); defs.appendChild(createGradient('gradient2', '#1E2CEF', '#4E5CFF')); shadows && defs.appendChild(createDropShadowFilter('shadow2', '#1E2CEF', blur, offset, offset)); defs.appendChild(createGradient('gradient3', '#FF2CEF', '#FF74FF')); shadows && defs.appendChild(createDropShadowFilter('shadow3', '#FF2CEF', blur, offset, offset)); defs.appendChild(createGradient('gradient4', '#FF4196', '#FF7582')); shadows && defs.appendChild(createDropShadowFilter('shadow4', '#FF4196', blur, offset, offset)); defs.appendChild(createGradient('gradient5', '#FFC14A', '#FFEA00')); shadows && defs.appendChild(createDropShadowFilter('shadow5', '#FFC14A', blur, offset, offset)); defs.appendChild(createGradient('gradient6', '#722CEF', '#A851FF')); shadows && defs.appendChild(createDropShadowFilter('shadow6', '#722CEF', blur, offset, offset)); // Groups are used so we can apply filters and animate different transform properties // separately when at rest, when hovering, or when pressing the squircles. // If you don't want such animations, you can totally do without any groups and just // place the paths elements straight into your svg root const g0 = DOM.element('svg:g'); if (lighting) { defs.appendChild(createLightingFilter('light', width / 2.5, 0, width * 1.5, '#666')); g0.setAttributeNS(null, 'style', `filter: url(${window.location.href}#light)`); } s.appendChild(g0); const n = exponent; // We're only interested in squircles in this doodle // but the formula works for more general cases where width != height const lameHeight = lameWidth; const size = { width: lameWidth, height: lameHeight }; // Squircle #1 let x = width / 2 - size.width / 2; let y = height / 2 - size.height - margin / 3; g0.appendChild( createSquircle(n, size, x, y, 'gradient1', 'shadow1') ); // Squircle #2 x = width / 2 - (size.width * 1.5 + Math.max(size.width / 3, margin / 2)); g0.appendChild( createSquircle(n, size, x, y, 'gradient2', 'shadow2') ); // Squircle #3 x = width / 2 + (size.width * 0.5 + + Math.max(size.width / 3, margin / 2)); g0.appendChild( createSquircle(n, size, x, y, 'gradient3', 'shadow3') ); // Squircle #4 x = width / 2 - size.width / 2; y = height / 2 + margin / 3; g0.appendChild( createSquircle(n, size, x, y, 'gradient5', 'shadow5') ); // Squircle #5 x = width / 2 - (size.width * 1.5 + Math.max(size.width / 3, margin / 2)); g0.appendChild( createSquircle(n, size, x, y, 'gradient4', 'shadow4') ); // Squircle #6 x = width / 2 + (size.width * 0.5 + + Math.max(size.width / 3, margin / 2)); g0.appendChild( createSquircle(n, size, x, y, 'gradient6', 'shadow6') ); // Finally return s; }31:T8cf,function lamé( n, size ) { const path = DOM.element('svg:path'); let d = ''; // In a squircle, a = b, but the formula works for any (a, b) const a = size.width / 2; const b = size.height / 2; // Compute the first quadrant, 0 <= t <= π / 2 // the formula is generic though, and we could go up to 2π // since the signs of cos(t) and sin(t) aren't hardcoded. // Although if you do this, you should make sure `resolution` // is even to make sure the shape is symmetric const limit = Math.PI / 2; const points = []; for (let i = 0; i < resolution; i++) { let t = i / (resolution - 1) * limit; const exp = 2 / n; const cosT = Math.cos(t); const sinT = Math.sin(t); const x = sign(cosT) * a * ( Math.abs(cosT) ** exp ); const y = sign(sinT) * b * ( Math.abs(sinT) ** exp ); if (i == 0) { d += `M ${x + a} ${y + b}`; } else { d += `L${x + a} ${y + b}`; } points.push([x,y]); } // Mirror the points for the remaining quadrants, rotating clockwise. // Since Lamé curves are symmetric with respect to both the horizontal // and the vertical axis, we don't have to compute the remaining points, // instead we just invert the x & y signs according to a matrix const matrix = [ [-1, 1], [-1, -1], [1, -1] ]; for (let i = 0; i < matrix.length; i++) { points.reverse(); // read previous quadrant points in reverse order (LIFO) const [signX, signY] = matrix[i]; for (let j = 0; j < points.length; j++) { const [x, y] = points[j]; d += `L${signX * x + a} ${signY * y + b}` } } /* The following code is another way to mirror the points, without using a matrix, but hard-coded loops instead */ // /* Second quadrant: */ // for (let i = points.length - 1; i >= 0; i--) { // const [x, y] = points[i]; // d += `L${-x + a} ${y + b}` // } // /* Third quadrant: */ // for (let i = 0; i < points.length; i++) { // const [x, y] = points[i]; // d += `L${-x + a} ${-y + b}` // } // /* Fourth quadrant */ // for (let i = points.length - 1; i >= 0; i--) { // const [x, y] = points[i]; // d += `L${x + a} ${-y + b}` // } d += 'Z'; path.setAttributeNS(null, 'd', d); return path; }32:T8a1,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; }33:T4fb,function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }34:T153d,html`

CSS is form,
form follows function[s],
indeed, that is a pun

`35:[] 2d:{"id":"b3a9ed849eaa2b8c","slug":"draw-squircle-shapes-with-svg-javascript","title":"Drawing svg squircle shapes with javascript","thumbnail":"5b77fc78caf51649be05cb8db9ca1f621e9e6491e817d88b4e92cb634dbc9e4e","access_level":"public","create_time":"$D2021-01-27T10:39:12.325Z","update_time":"$D2021-04-05T17:02:27.788Z","view_time":null,"first_public_time":"$D2021-01-30T15:15:29.933Z","has_unpublished_edits":null,"fork":false,"stars":69,"starred":false,"owner":{"type":"team","id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":"starter_2024"},"version":961,"publish_version":961,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null}],"members":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":29,"collection":{"id":"3bb657500226a15a","slug":"doodles","title":"Doodles","owner":{"id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet"}},"type":"notebook","body":{"title":"Drawing svg squircle shapes with javascript","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md`## Svg squircle generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof exponent = slider({\n min: 0.5,\n max: 8,\n step: 0.1,\n value: 5,\n title: \"n\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof lameWidth = slider({\n min: 40,\n max: Math.max(width, height) * 0.302 - margin,\n step: 1,\n value: Math.min(width, height) * 0.5 - margin,\n title: \"Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof resolution = slider({\n min: 2,\n max: 100,\n step: 1,\n value: 32,\n title: \"Resolution\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"viewof wiggle = checkbox({\n description: \"Disable if you want the squircles to be static\",\n options: [{ value: \"wiggle\", label: \"Wiggle animation\" }],\n value: \"wiggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"viewof shadows = checkbox({\n description: \"Disable if you have performance issues\",\n options: [{ value: \"shadow\", label: \"Tinted drop shadow\" }],\n value: \"shadow\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"function createSquircle(n, size, x, y, gradient, shadow) {\n const g1 = DOM.element('svg:g');\n const g2 = DOM.element('svg:g');\n const p = lamé(n, size);\n p.setAttributeNS(\n null,\n 'transform',\n `translate(${x}, ${y})`\n );\n p.setAttributeNS(\n null,\n 'fill',\n `url(#${gradient})`\n );\n shadows && p.setAttributeNS(\n null,\n 'style',\n `filter: url(#${shadow})`\n );\n g2.appendChild(p);\n g1.appendChild(g2);\n return g1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"function sign(x) {\n return ((x > 0) - (x < 0));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"function createGradient(id, color1, color2) {\n const radialGradient = DOM.element('svg:radialGradient');\n radialGradient.setAttributeNS(null, 'id', id);\n radialGradient.setAttributeNS(null, 'cx', '70%');\n radialGradient.setAttributeNS(null, 'cy', '70%');\n radialGradient.setAttributeNS(null, 'r', '80%');\n const stop1 = DOM.element('svg:stop');\n stop1.setAttributeNS(null, 'offset', '30%');\n stop1.setAttributeNS(null, 'stop-color', color1);\n radialGradient.appendChild(stop1);\n const stop2 = DOM.element('svg:stop');\n stop2.setAttributeNS(null, 'offset', '100%');\n stop2.setAttributeNS(null, 'stop-color', color2);\n radialGradient.appendChild(stop2);\n return radialGradient;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"function createDropShadowFilter(id, color, blurRadius = 12, offsetX = 4, offsetY = 4, alpha = 0.4) {\n return svg`\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"function createLightingFilter(id, x, y, w, color) {\n return svg`\n \n \n \n \n \n \n \n \n \n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"width = 980","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"margin = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"viewof lighting = checkbox({\n description: \"Apply specular lighting svg filter, quite slow performance-wise\",\n options: [{ value: \"ligthing\", label: \"Ligthing effect\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"md`\n## Want some more?\nLearn [how to draw and animate simple blob shapes with svg and javascript](https://observablehq.com/@daformat/drawing-blobs-with-svg), or, you know, just stare at those wiggly things for some time. Either way, should be fun!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"