2e:null 2f:["$","title",null,{"children":"Create a Pattern | Michael Bricknell | Observable"}] 34:T437,function createPattern(input, options = {}) { const width = options.width || 400; const height = options.height || 300; if (input instanceof SVGElement || input?.tagName === "svg") { const { fill, id } = getPatternFill(input); const svg = html``; return { svg, id }; } const id = options.id || "wave"; const patternWidth = options.patternWidth || 25; const patternHeight = options.patternHeight || 25; const imageSrc = typeof input === "string" ? input : input.src; const svg = html``; return { svg, id }; }35:Tdfa,function animatePattern(config) { const { id, dur = "1s", from, to, repeatCount = "indefinite", paused = false, yoyo = false } = config; const svg = d3.create("svg").attr("width", 150).attr("height", 150); let texture; if ( config.customPath === "waves" || config.customPath === "caps" || config.customPath === "woven" || config.customPath === "nylon" || config.customPath === "hexagons" || config.customPath === "crosses" || config.customPath === "squares" ) { texture = textures.paths().d(config.customPath); } else { texture = textures.lines().orientation(...config.orientation); } texture .size(config.lineSize) .strokeWidth(config.lineWidth) .stroke(config.accentColor) .background(config.backgroundColor) .shapeRendering("crispEdges"); if (config.thicker) texture = texture.thicker(); svg.call(texture); const patternEl = svg.select("pattern").node(); const width = +patternEl.getAttribute("width"); patternEl.querySelectorAll("path, line").forEach((el) => { const anim = document.createElementNS( "http://www.w3.org/2000/svg", "animateTransform" ); anim.setAttribute("attributeName", "transform"); anim.setAttribute("type", "translate"); anim.setAttribute("dur", dur); anim.setAttribute("begin", paused ? "indefinite" : "0s"); anim.setAttribute("repeatCount", repeatCount); if (yoyo) { anim.setAttribute("calcMode", "spline"); anim.setAttribute( "values", `${from ?? "0,0"}; ${to ?? `-${width},0`}; ${from ?? "0,0"}` ); anim.setAttribute("keyTimes", "0; 0.5; 1"); anim.setAttribute("keySplines", "0.42 0 0.58 1; 0.42 0 0.58 1"); } else { anim.setAttribute("from", from ?? "0,0"); anim.setAttribute("to", to ?? `-${width},0`); } el.appendChild(anim); if (config.opacityFrom !== undefined || config.opacityTo !== undefined) { const opacAnim = document.createElementNS( "http://www.w3.org/2000/svg", "animate" ); opacAnim.setAttribute("attributeName", "opacity"); opacAnim.setAttribute("dur", config.opacityDur ?? dur); opacAnim.setAttribute("begin", paused ? "indefinite" : "0s"); opacAnim.setAttribute("repeatCount", repeatCount); if (yoyo) { opacAnim.setAttribute("calcMode", "spline"); opacAnim.setAttribute( "values", `${config.opacityFrom ?? 1}; ${config.opacityTo ?? 0}; ${ config.opacityFrom ?? 1 }` ); opacAnim.setAttribute("keyTimes", "0; 0.5; 1"); opacAnim.setAttribute("keySplines", "0.42 0 0.58 1; 0.42 0 0.58 1"); } else { opacAnim.setAttribute("from", config.opacityFrom ?? 1); opacAnim.setAttribute("to", config.opacityTo ?? 0); } el.appendChild(opacAnim); } }); patternEl.setAttribute("id", id); patternEl.querySelector("rect").setAttribute("fill", config.backgroundColor); svg .append("rect") .attr("width", config.width) .attr("height", config.height) .attr("class", config.class ?? "") .attr("fill", `url(#${id})`); const svgNode = svg.node(); if (paused) { const rect = svgNode.querySelector(`rect[fill='url(#${id})']`); const anims = svgNode.querySelectorAll("animateTransform, animate"); rect.addEventListener("mouseover", () => anims.forEach((a) => a.beginElement()) ); rect.addEventListener("mouseout", () => anims.forEach((a) => a.endElement()) ); } return svgNode; }36:T5a5,myHexCodes = [ "#f1e9cd", "#f2e7cf", "#ece6d0", "#f2eacc", "#f3e9ca", "#f2ebcd", "#e6e1c9", "#e2ddc6", "#cbc8b7", "#bfbbb0", "#bebeb3", "#b7b5ac", "#bab191", "#9c9d9a", "#8a8d84", "#5b5c61", "#555152", "#413f44", "#454445", "#423937", "#433635", "#252024", "#241f20", "#281f3f", "#1c1949", "#4f638d", "#383867", "#5c6b8f", "#657abb", "#6f88af", "#7994b5", "#6fb5a8", "#719ba2", "#8aa1a6", "#d0d5d3", "#8590ae", "#3a2f52", "#39334a", "#6c6d94", "#584c77", "#533552", "#463759", "#bfbac0", "#77747f", "#4a475c", "#b8bfaf", "#b2b599", "#979c84", "#5d6161", "#61ac86", "#a4b6a7", "#adba98", "#93b778", "#7d8c55", "#33431e", "#7c8635", "#8e9849", "#c2c190", "#67765b", "#ab924b", "#c8c76f", "#ccc050", "#ebdd99", "#ab9649", "#dbc364", "#e6d058", "#ead665", "#d09b2c", "#a36629", "#a77d35", "#f0d696", "#d7c485", "#f1d28c", "#efcc83", "#f3daa7", "#dfa837", "#ebbc71", "#d17c3f", "#92462f", "#be7249", "#bb603c", "#c76b4a", "#a75536", "#b63e36", "#b5493a", "#cd6d57", "#711518", "#e9c49d", "#eedac3", "#eecfbf", "#ce536b", "#b74a70", "#b7757c", "#612741", "#7a4848", "#3f3033", "#8d746f", "#4d3635", "#6e3b31", "#864735", "#553d3a", "#613936", "#7a4b3a", "#946943", "#c39e6d", "#513e32", "#8b7859", "#9b856b", "#766051", "#453b32" ]37:T7a3,linePattern = { // Create a container for the swatches const container = htl.html`

`; // Loop over each color in your array for (const hexCode of myHexCodes) { // 1. Create the unique configuration for this swatch const config = { ...baseStyle, accentColor: hexCode, lineWidth: formPattern.lineWidth, lineSize: formPattern.lineSize }; // 2. Generate the pattern SVG using your function const svgPattern = pattern(config); // 3. Extract the element and give it a unique ID const patternElement = d3.select(svgPattern).select("pattern"); const patternId = patternElement.attr("id") + `-${hexCode.slice(1)}`; patternElement.attr("id", patternId); // 4. Create the swatch SVG, adding a 'cursor: pointer' style to make it look clickable const swatch = htl.svg``; // --- NEW: Add click-to-copy functionality --- swatch.onclick = () => { // Convert this swatch's specific 'config' object to a formatted JSON string const configString = JSON.stringify(config, null, 2); // 2. Wrap the JSON string to look like a function call const functionCallString = `pattern(${configString})`; // 3. Use the Clipboard API to copy the new string navigator.clipboard.writeText(functionCallString); // (Optional) Provide visual feedback to the user that the copy worked swatch.style.outline = "2px solid steelblue"; setTimeout(() => { swatch.style.outline = "none"; }, 750); }; // 5. Add the finished swatch to the container container.appendChild(swatch); } // Return the container with all the swatches return container; }38:T7e3,backgroundPattern = { // Create a container for the swatches const container = htl.html`

`; // Loop over each color in your array for (const hexCode of myHexCodes) { // 1. Create the unique configuration for this swatch const config = { ...baseStyle, backgroundColor: hexCode, accentColor: selectedColor[0], lineWidth: formPattern.lineWidth, lineSize: formPattern.lineSize, width: formPattern.width, height: formPattern.height }; // 2. Generate the pattern SVG using your function const svgPattern = pattern(config); // 3. Extract the element and give it a unique ID const patternElement = d3.select(svgPattern).select("pattern"); const patternId = patternElement.attr("id") + `-${hexCode.slice(1)}`; patternElement.attr("id", patternId); // 4. Create the swatch SVG and fill it with the pattern const swatch = htl.svg``; // --- NEW: Add click-to-copy functionality --- swatch.onclick = () => { // Convert this swatch's specific 'config' object to a formatted JSON string const configString = JSON.stringify(config, null, 2); // 2. Wrap the JSON string to look like a function call const functionCallString = `pattern(${configString})`; // 3. Use the Clipboard API to copy the new string navigator.clipboard.writeText(functionCallString); // (Optional) Provide visual feedback to the user that the copy worked swatch.style.outline = "2px solid steelblue"; setTimeout(() => { swatch.style.outline = "none"; }, 750); }; // 5. Add the finished swatch to the container container.appendChild(swatch); } // Return the container with all the swatches return container; }39:[] 32:{"id":"bfa724a54d89163b","slug":"create-a-pattern","title":"Create a Pattern","thumbnail":"7359fe6eb889dcfc8eb02eee96ff57b4214986f009aa096507a91039a34fdb81","access_level":"public","create_time":"$D2025-09-14T01:32:34.159Z","update_time":"$D2026-04-25T15:54:43.077Z","view_time":null,"first_public_time":"$D2025-09-20T12:02:34.805Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":808,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"868bd20896c9e454","slug":"wallpaper","title":"Wallpaper Groups","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Create a Pattern","cells":[{"id":0,"value":"# Create a Pattern","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":562,"value":"To use import pattern, linePattern, backgroundPattern, formPattern","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"import {\n groups,\n viewof selectedBase,\n selectedColor\n} from \"@mbrickmaps/werners-nomenclature-of-colours\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"function getPatternFill(patternElement) {\n if (!patternElement) return null;\n const fill = d3.select(patternElement).select(\"pattern\");\n const id = fill.attr(\"id\");\n return { fill, id };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"textures = require(\"textures\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"JSON.stringify(formPattern)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"baseStyle = ({\n orientation: formPattern.orientation,\n lineSize: 11.5,\n lineWidth: 1,\n accentColor: \"#c11515\",\n backgroundColor: \"white\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function pattern(config) {\n const svg = d3.create(\"svg\").attr(\"width\", 150).attr(\"height\", 150);\n let texture;\n if (config.customPath) {\n texture = textures.paths().d(config.customPath);\n } else {\n texture = textures.lines().orientation(...config.orientation);\n }\n texture\n .size(config.lineSize)\n .strokeWidth(config.lineWidth)\n .stroke(config.accentColor)\n .background(config.backgroundColor)\n .shapeRendering(\"crispEdges\");\n if (config.thicker) texture = texture.thicker();\n svg.call(texture);\n svg\n .append(\"rect\")\n .attr(\"width\", config.width)\n .attr(\"class\", config.class ?? \"\")\n .attr(\"height\", config.height)\n .style(\"fill\", texture.url());\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"viewof selectedBase","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"viewof formPattern = Inputs.form({\n orientation: Inputs.checkbox(\n [\"diagonal\", \"horizontal\", \"vertical\", \"1/8\", \"3/8\", \"5/8\", \"6/8\", \"7/8\"],\n {\n label: \"Select at least one\",\n value: \"diagonal\"\n }\n ),\n lineSize: Inputs.range([0.5, 80], { value: 26, label: \"Size\", step: 0.5 }),\n lineWidth: Inputs.range([-1, 16], { value: 1, label: \"Width\", step: 0.5 }),\n width: Inputs.range([8, 512], {\n value: 256,\n label: \"Width\",\n step: 1\n }),\n height: Inputs.range([8, 512], {\n value: 256,\n label: \"Height\",\n step: 1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"selectedColor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"pattern({\n orientation: [],\n lineSize: 8,\n lineWidth: 1.5,\n accentColor: \"#f3daa7\",\n backgroundColor: \"#d09b2c\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"pattern({\n orientation: [],\n lineSize: 8,\n lineWidth: 1.5,\n accentColor: \"#f3daa7\",\n backgroundColor: \"#a36629\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"pattern({\n orientation: [],\n lineSize: 8,\n lineWidth: 1.5,\n accentColor: \"#f3daa7\",\n backgroundColor: \"#cd6d57\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"pattern({\n orientation: [],\n lineSize: 8,\n lineWidth: 1.5,\n accentColor: \"#f3daa7\",\n backgroundColor: \"#657abb\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"pattern({\n orientation: [],\n lineSize: 8,\n lineWidth: 1.5,\n accentColor: \"#f3daa7\",\n backgroundColor: \"#bfbac0\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"pattern({\n orientation: [],\n lineSize: 8,\n lineWidth: 1.5,\n accentColor: \"#f3daa7\",\n backgroundColor: \"#6fb5a8\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"pattern({\n orientation: [\"6/8\", \"7/8\"],\n lineSize: 4.5,\n lineWidth: 0.5,\n accentColor: \"#9b856b\",\n backgroundColor: \"#423937\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"pattern({\n orientation: [\"horizontal\"],\n lineSize: 1.5,\n lineWidth: 0.5,\n accentColor: \"#cd6d57\",\n backgroundColor: \"white\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"pattern({\n orientation: [\"6/8\", \"7/8\"],\n lineSize: 4.5,\n lineWidth: 0.5,\n accentColor: \"#9b856b\",\n backgroundColor: \"#711518\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"pattern({\n orientation: [\"6/8\", \"7/8\"],\n lineSize: 4.5,\n lineWidth: 0.5,\n accentColor: \"#9b856b\",\n backgroundColor: \"#1c1949\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"pattern({\n orientation: [\"vertical\", \"6/8\"],\n lineSize: 4,\n lineWidth: 1,\n accentColor: \"#3f3033\",\n backgroundColor: \"#93b778\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"pattern({\n orientation: [\"vertical\", \"6/8\"],\n lineSize: 4,\n lineWidth: 1,\n accentColor: \"#3f3033\",\n backgroundColor: \"#d09b2c\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"pattern({\n orientation: [\"vertical\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#613936\",\n backgroundColor: \"#711518\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"pattern({\n orientation: [\"vertical\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#613936\",\n backgroundColor: \"#ce536b\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"pattern({\n orientation: [\"vertical\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#613936\",\n backgroundColor: \"#6fb5a8\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"pattern({\n orientation: [\"vertical\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#613936\",\n backgroundColor: \"#ebbc71\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"pattern({\n orientation: [\"vertical\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#ead665\",\n backgroundColor: \"#6fb5a8\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"pattern({\n orientation: [\"vertical\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#ead665\",\n backgroundColor: \"#61ac86\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"pattern({\n orientation: [\"vertical\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#ead665\",\n backgroundColor: \"#7c8635\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"pattern({\n orientation: [\"vertical\", \"6/8\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#b7757c\",\n backgroundColor: \"#e6d058\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"pattern({\n orientation: [\"vertical\", \"6/8\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#b7757c\",\n backgroundColor: \"#dfa837\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"pattern({\n orientation: [\"vertical\", \"6/8\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#b7757c\",\n backgroundColor: \"#711518\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"pattern({\n orientation: [],\n lineSize: 3,\n lineWidth: -0.5,\n accentColor: \"#f1e9cd\",\n backgroundColor: \"#bab191\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"pattern({\n orientation: [\"horizontal\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#d09b2c\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"pattern({\n orientation: [\"horizontal\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#d17c3f\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"pattern({\n orientation: [\"horizontal\"],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#b74a70\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"pattern({\n orientation: [\"vertical\", \"6/8\"],\n lineSize: 3,\n lineWidth: -0.5,\n accentColor: \"#b7757c\",\n backgroundColor: \"#711518\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"## Lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"pattern({\n orientation: [],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#6f88af\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"pattern({\n orientation: [],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#93b778\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"pattern({\n orientation: [],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#dbc364\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"pattern({\n orientation: [],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#dfa837\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"pattern({\n orientation: [],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#711518\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"pattern({\n orientation: [],\n lineSize: 3,\n lineWidth: 1,\n accentColor: \"#f2eacc\",\n backgroundColor: \"#bab191\",\n width: 150,\n height: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"viewof orientation = Inputs.checkbox(\n [\n \"diagonal\",\n \"horizontal\",\n \"vertical\",\n \"1/8\",\n \"2/8\",\n \"3/8\",\n \"5/8\",\n \"6/8\",\n \"7/8\"\n ],\n {\n label: \"Select at least one\",\n value: \"diagonal\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof patternSize = Inputs.range([0.1, 50], { label: \"Size\", step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"viewof patternWidth = Inputs.range([0.1, 5], { label: \"Width\", step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"viewof accentColor1 = Inputs.color({ label: \"Accent color\", value: \"#ffffff\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"viewof backgroundColor1 = Inputs.color({\n label: \"Background color\",\n value: \"#000000\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"customPath","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"function texturePath() {\n // Log the actual method chain with proper single quotes\n console.log(\n `textures.paths().d('${customPath}').size(${patternSize}).strokeWidth(${patternWidth}).stroke('${accentColor1}').background('${backgroundColor1}').shapeRendering('crispEdges')`\n );\n\n const svg = d3.create(\"svg\").attr(\"width\", 150).attr(\"height\", 150);\n let c = `M 0,${patternSize * 0.6} L ${patternSize * 0.2},${\n patternSize * 0.3\n } L ${patternSize * 1},${patternSize * 0.6}`;\n const texture = textures\n .paths()\n .d(customPath) // (s)=>c\n .size(patternSize)\n .strokeWidth(patternWidth)\n .stroke(accentColor1)\n .background(backgroundColor1)\n .shapeRendering(\"crispEdges\");\n svg.call(texture);\n svg\n .append(\"rect\")\n .attr(\"width\", 150)\n .attr(\"height\", 150)\n .style(\"fill\", texture.url());\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"## Paths","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"viewof customPath = Inputs.radio(\n [\n \"hexagons\",\n \"crosses\",\n \"caps\",\n \"woven\",\n \"waves\",\n \"nylon\",\n \"squares\",\n \"custom\"\n ],\n {\n label: \"Select one\",\n value: \"waves\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"texturePath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"## Custom shape","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"function textureCustomPath() {\n const svg = d3.create(\"svg\").attr(\"width\", 150).attr(\"height\", 150);\n let c = `M 0,${patternSize * 0.6} L ${patternSize * 0.2},${\n patternSize * 0.3\n } L ${patternSize * 1},${patternSize * 0.6}`;\n const texture = textures\n .paths()\n .d((s) => c) // (s)=>c\n .size(patternSize)\n .strokeWidth(patternWidth)\n .stroke(accentColor1)\n .background(backgroundColor1)\n .shapeRendering(\"crispEdges\");\n\n svg.call(texture);\n\n svg\n .append(\"rect\")\n .attr(\"width\", 150)\n .attr(\"height\", 150)\n .style(\"fill\", texture.url());\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"customPattern = textureCustomPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"https://riccardoscalco.it/textures/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"animatePattern({\n id: \"ocean\",\n animate: true,\n customPath: \"waves\",\n paused: true,\n yoyo: true,\n lineSize: 16,\n lineWidth: 0.6,\n accentColor: \"#39334a\",\n backgroundColor: \"#4f638d\",\n width: 150,\n height: 150,\n dur: \"2.5s\",\n from: \"-8,-8\",\n to: \"0,0\",\n opacityFrom: 0.3,\n opacityTo: 0.6\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"animatePattern\n ({\n id: \"ocean2\",\n animate: true,\n yoyo: true,\n customPath: \"waves\",\n paused: true,\n lineSize: 8,\n lineWidth: 0.5,\n accentColor: \"#7ab3c8\",\n backgroundColor: \"#1a3a4a\",\n width: 150,\n height: 150,\n dur: \"1.5s\",\n from: \"0,0\",\n to: \"-8,0\",\n opacityFrom: 0.6,\n opacityTo: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"animatePattern({\n id: \"sand\",\n customPath: \"waves\",\n lineSize: 4,\n paused: true,\n lineWidth: 0.4,\n accentColor: \"#c9a96e\",\n backgroundColor: \"#e8d5a3\",\n width: 150,\n height: 150,\n dur: \"10s\",\n from: \"0,0\",\n to: \"-4,-4\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"