31:T546,flowers = { reset; 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.setAttributeNS(null, 'class', animate ? `animate` : ''); // This is the group in which we will append each pattern const g = svg``; s.appendChild(g); g.appendChild(svg``) const border = 24; const radius = size; // ~~ is a convenient equivalent to `Math.floor` const margin = ~~( radius / 2.8 ); // Calculate cell and grid dimensions (number of cells) const cellSize = radius * 4 + margin; const maxX = ~~( (width - border) / cellSize ); const maxY = ~~( (height - border) / cellSize ); // Offsets to center the patterns const xOffset = (width - (maxX - 1) * cellSize) / 2; const yOffset = (height - (maxY - 1) * cellSize) / 2; // Distribute and draw patterns for (let y = 0; y < maxY; y++) { for (let x = 0; x < maxX; x++) { g.appendChild( drawFlower( x * cellSize + xOffset, y * cellSize + yOffset, radius ) ); } } // Save this to adapt css animation s.maxX = maxX; return s; }32:Ta10,function drawFlower(x, y, radius) { const g = svg``; const c = svg``; const length = 2 * Math.PI * radius; // Random stroke color and width, from 1/3 of the radius up to 2/3 const thickness = Math.random() * radius / 3 + radius / 3; c.setAttributeNS( null, 'stroke', colors[~~(Math.random() * colors.length)] ); c.setAttributeNS( null, 'stroke-width', thickness ); // Pick random pattern with respect to the `repartition` factor if (Math.random() > repartition) { // Pattern 1: Dotted stroke with random amount of dots // --------------------------------------------------- const maxAmount = ~~( length / thickness ); const amount = ~~Math.max( maxAmount / 3, Math.random() * maxAmount ); c.setAttributeNS(null, 'stroke-dashoffset', 0); c.setAttributeNS(null, 'stroke-dasharray', `0 ${length / (amount)}`); c.setAttributeNS(null, 'stroke-linecap', 'round'); // Draw circle at center 75% of the time let c2; if (Math.random() > (1 - 0.75)) { c2 = svg``; c2.setAttributeNS(null, 'fill', colors[~~(Math.random() * colors.length)]); } // Append pattern 1 elements g.appendChild(c); c2 && g.appendChild(c2); } else { // Pattern 2: Random amount of thick dashes of varying length // ---------------------------------------------------------- c.setAttributeNS(null, 'stroke-dashoffset', 0); c.setAttributeNS(null, 'stroke-width', thickness + thickness * Math.random()); // Maximum number of stripes depends on the size of the patterns const stripes = 1 + ~~( Math.random() * ( size > 20 ? 3 : 4 ) ); // The pattern is repeated 3 times along the circle const maxStripeSize = length / 3 / stripes; // Create stroke and spacing pairs const dashes = Array(stripes).fill('').map(s => { // Spacing is minimum 10% of the max strip size and up to 60% of it const spacing = maxStripeSize * 0.1 + Math.random() * maxStripeSize * 0.5; const stripe = maxStripeSize - spacing; return { stripe, spacing }; }); // Convert to dasharray notation c.setAttributeNS( null, 'stroke-dasharray', dashes.map( s => `${s.stripe}, ${s.spacing}` ).join(', ') ); // Append pattern 2 element g.appendChild(c); } return g; }33: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; }34: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; }35:T176b,html`

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

`36:[] 2f:{"title":"SVG flowers","cells":[{"id":0,"value":"md`\n# SVG flowers\n\nI stumbled on [this tweet](https://twitter.com/wks_jp/status/1368779389463236609?s=20) by [@wks_jp](https://twitter.com/wks_jp) and since spring is coming, I was inspired to create the same kind of floral patterns using svg \\`stroke-dasharray\\`. There are two patterns that we randomly draw:\n\n1. **Variable density dotted path:** a \\`stroke-dasharray\\` is used with a 0 length for the stroke so it becomes rounded to evenly spaced circles when \\`stroke-linecap\\` which is set to \\`round\\`. Additionally, using this pattern, the resulting flower may or may not have a solid center drawn.\n2. **Striped stroke:** an arbitrary number of stripes are created using multiple random values in \\`stroke-dasharray\\`, this pattern is then repeated three times around the circle's length.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"viewof size = radio({\n options: [\n /* { label: 'X-Small: draw tons of patterns', value: 12 }, */\n { label: 'Small: draw more patterns', value: 16 },\n { label: 'Medium', value: 20 },\n { label: 'Large: draw less patterns', value: 30 }\n ],\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof repartition = slider({\n min: 0,\n max: 1,\n step: 0.1,\n value: 0.5,\n title: \"Repartition\",\n description: \"Dotted pattern <~~ Repartition of each pattern ~~> striped pattern\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof width = slider({\n min: 180,\n max: 954,\n step: 1,\n value: 954,\n title: \"Width\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof height = slider({\n min: 180,\n max: 1250,\n step: 1,\n value: 620,\n title: \"Height\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"viewof animate = checkbox({\n description: \"Disable if you want to stop the rotating animation\",\n options: [{ value: \"rotate\", label: \"Rotate animation\" }],\n value: \"rotate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"colors = ['#605951', '#E26761', '#EBC06F', '#6693A0']","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"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"},{"id":501,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"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"},{"id":417,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}