30:[] 2e:{"title":"Fading zigzag","cells":[{"id":942,"value":"md`# Fading zigzag`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"{\n const { zigs, l, w, a } = z;\n const totalWidth = w / 4 + l;\n const totalHeight = 2 * a + l;\n const aspect = totalWidth / totalHeight;\n const viewportWidth = width;\n const viewportHeight = 300;\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`\nThe goal is to create a Z shape like the one used in an ${p.mm}: a solid colored body tilted 45˚, with a seamless arm and a leg (parallelograms) that fade into transparency. \n\nNote that the arm and leg are each other’s point reflection and use identical fading.\n\nIf you have a full Z, that is, a body including both the arm and the leg, a single gradient will do. However, if an arm or leg is missing, you have tow options:\n* adjust the gradient’s color stops, or\n* compose the Z of three elements: the body, its arm and its leg.\n\nIn this example, a proper gradient is created for eacht of the colors in \\`palette[]\\`, using a combination of \\`\\` and \\``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"function paths({ zigs, w, l, a }) {\n const slope = 1;\n const p1 = [0, 0];\n const p2 = [-l, slope * l];\n const p3 = [-a, 0];\n const p4 = [slope * w, w];\n const p5 = [a, 0];\n const p6 = [l, -slope * l];\n const p7 = [a, 0];\n const p8 = [-slope * w, -w];\n const p9 = [0, l - w];\n // const arms = `M${p1}l${p2}l${p3}l${p4}l${p5}l${p6}l${p7}l${p8}Z`;\n const body = `M${p1}l${p2}l${p4}l${p6}Z`;\n const head = `M${p1}l${p5}l${[w, w]}l${p3}Z`;\n\n let p = \"\";\n zigs.forEach((path, i) => {\n const transform = `translate(${w - l},${l + w}) rotate(180)`;\n p += ``;\n p += ` \\n`;\n p += ` \\n`;\n p += ` \\n`;\n p += `\\n`;\n });\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"md`This palette is a copy of [D3’s *schemeDark2* color scheme](https://github.com/d3/d3-scale-chromatic).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"palette = [\n \"#1b9e77\",\n \"#d95f02\",\n \"#7570b3\",\n \"#e7298a\",\n \"#66a61e\",\n \"#e6ab02\",\n \"#a6761d\",\n \"#666666\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"md`# Gradient sandbox`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof length = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"length","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"{\n return svg`\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"uid = DOM.uid(\"fader\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"md`## Safari transparent gradient turns black instead`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"html`\n

Linear gradient bugged on Safari

Linear gradient NOT resolved on Safari

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"import {p} from \"@martien/pearl\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}