2e:null 2f:["$","title",null,{"children":"Neon Graffiti | Luke Murray | Observable"}] 34:T678,viewof palette = { return htl.html`

${createPalette("Blues", "#7fd4ff", "#ffffff", "#33bbff", "#000000", "#132964")} ${createPalette("Pinks", "#ffbdde", "#ffebeb", "#ff5cad", "#000000", "#4b2f45")} ${createPalette( "Greens", "#10cb48", "#d0ffc7", "#47c13e", "#000000", "#101e12" )} ${createPalette("Reds", "#e83030", "#ffe0e0", "#b22a2a", "#000000", "#301c1c")} ${createPalette( "Oranges", "#e8a530", "#fff2e0", "#d78323", "#000000", "#3f1324" )}

`; function setInput(input, value) { input.input.value = value; input.dispatchEvent(new Event("input")); } function createPalette( label, tubeColor, gasColor, glowColor, shadowColor_, backgroundColor_ ) { const palette = htl.html`

${label}

`; palette.addEventListener("click", () => { console.log("click"); console.log(viewof strokeColor); setInput(viewof strokeColor, tubeColor); setInput(viewof fillColor, gasColor); setInput(viewof shadowColor, glowColor); setInput(viewof backgroundShadowColor, shadowColor_); setInput(viewof backgroundColor, backgroundColor_); }); return palette; } }35:T1102,viewof freehand = { const height = 600; let currentStrokeElement = undefined; let currentFillElement = undefined; let currentStrokeData = undefined; const strokes = []; const g = htl.svg``; const svg = htl.svg``; svg.addEventListener("pointerdown", handlePointerDown); svg.addEventListener("pointermove", handlePointerMove); svg.addEventListener("pointerup", handlePointerUp); svg.addEventListener("pointercancel", handlePointerCancel); svg.addEventListener("touchstart", preventDefaultHandler); svg.addEventListener("touchend", preventDefaultHandler); svg.addEventListener("touchcancel", preventDefaultHandler); svg.addEventListener("touchmove", preventDefaultHandler); const clearButton = htl.html``; clearButton.addEventListener("click", handleClear); const copyButton = htl.html``; copyButton.addEventListener("click", handleCopy); const multipleStrokesCheckbox = htl.html``; const element = htl.html`

${svg} ${clearButton} Allow Multiple Strokes${multipleStrokesCheckbox}

`; element.value = strokes; initialStrokes.forEach((stroke) => { const strokeElement = htl.svg``; const fillElement = htl.svg``; g.appendChild(strokeElement); g.appendChild(fillElement); updatePath(strokeElement, stroke); updatePath(fillElement, stroke); }); return element; function preventDefaultHandler(e) { e.preventDefault(); } function handlePointerDown(e) { e.preventDefault(); e.target.setPointerCapture(e.pointerId); if (!multipleStrokesCheckbox.checked) { handleClear(); } currentStrokeElement = htl.svg``; currentFillElement = htl.svg``; g.appendChild(currentStrokeElement); g.appendChild(currentFillElement); currentStrokeData = [pointsFromEvent(e)]; updatePath(currentStrokeElement, currentStrokeData); updatePath(currentFillElement, currentStrokeData); strokes.push(currentStrokeData); element.dispatchEvent(new CustomEvent("input")); } function handlePointerMove(e) { e.preventDefault(); if (currentStrokeElement !== undefined) { currentStrokeData.push(pointsFromEvent(e)); updatePath(currentStrokeElement, currentStrokeData); updatePath(currentFillElement, currentStrokeData); strokes[strokes.length - 1] = currentStrokeData; element.dispatchEvent(new CustomEvent("input")); } } function handlePointerUp(e) { e.preventDefault(); if (currentStrokeElement !== undefined) { currentStrokeData.push(pointsFromEvent(e)); updatePath(currentStrokeElement, currentStrokeData); updatePath(currentFillElement, currentStrokeData); strokes[strokes.length - 1] = currentStrokeData; element.dispatchEvent(new CustomEvent("input")); } currentStrokeElement = undefined; } function handlePointerCancel(e) { e.preventDefault(); currentStrokeElement = undefined; } function handleClear() { while (g.firstChild) { g.removeChild(g.firstChild); } strokes.length = 0; } function handleCopy() { pbcopy(JSON.stringify(element.value)); } function pointsFromEvent(e) { return [e.offsetX, e.offsetY, e.pressure]; } function getSvgPathFromStroke(stroke) { if (!stroke.length) return ""; const d = stroke.reduce( (acc, [x0, y0], i, arr) => { const [x1, y1] = arr[(i + 1) % arr.length]; acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2); return acc; }, ["M", ...stroke[0], "Q"] ); d.push("Z"); return d.join(" "); } function updatePath(strokeElement, strokeData) { strokeElement.setAttribute( "d", getSvgPathFromStroke( perfectFreehand.default(strokeData, { size: 9, smoothing: 0.99, thinning: 0.5, streamline: 0.99, start: { taper: 0, cap: true }, end: { taper: 0, cap: true }, last: true }) ) ); } }36:T45c,## Acknowledgements This sketch would not be possible without the amazing [perfect-freehand](https://github.com/steveruizok/perfect-freehand) library from [Steve Ruizok](https://twitter.com/steveruizok). Also thank you Steve for checking out an early version of this and giving me some pointers. The inspiration to use SVG filters to create a glow effect came from [Sara Soueidan's](https://twitter.com/SaraSoueidan) excellent [SVG Filters talk](https://www.sarasoueidan.com/blog/svg-filters/) and [Josh Comeau's](https://twitter.com/JoshWComeau) CSS for Javascript Developers [course](https://css-for-js.dev/). The idea for shadow layering is originally from [Tobias Ahlin's](https://twitter.com/tobiasahlin) amazing [blog](https://tobiasahlin.com/blog/layered-smooth-box-shadows/) but the use of bezier curves to parameterize the shadows is from [Philipp Brumm's](https://twitter.com/funkensturm) [smooth shadow generator](https://shadows.brumm.af/). The code for interpolating cubic bezier's is from [Fil's](https://twitter.com/recifs) [cubic bezier easing notebook](https://observablehq.com/d/e7d4fef33e304f2b).37:T5239,initialStrokes = [ [ [218, 244, 0.07999999821186066], [223, 248, 0.047312285751104355], [223, 248, 0.047312285751104355], [230, 253, 0.06018393114209175], [230, 253, 0.06018393114209175], [232, 254, 0.05961831659078598], [232, 254, 0.05961831659078598], [238, 257, 0.06114276126027107], [238, 257, 0.06114276126027107], [244, 259, 0.060269590467214584], [244, 259, 0.060269590467214584], [251, 260, 0.07071893662214279], [251, 260, 0.07071893662214279], [259, 260, 0.07014816254377365], [259, 260, 0.07014816254377365], [267, 260, 0.07685458660125732], [267, 260, 0.07685458660125732], [276, 258, 0.07883428782224655], [276, 258, 0.07883428782224655], [286, 254, 0.0799003317952156], [286, 254, 0.0799003317952156], [295, 249, 0.07955029606819153], [295, 249, 0.07955029606819153], [305, 244, 0.07861687988042831], [305, 244, 0.07861687988042831], [314, 237, 0.08697570860385895], [314, 237, 0.08697570860385895], [323, 230, 0.08687536418437958], [323, 230, 0.08687536418437958], [331, 223, 0.08701040595769882], [331, 223, 0.08701040595769882], [337, 215, 0.08766183257102966], [337, 215, 0.08766183257102966], [343, 207, 0.07747207581996918], [343, 207, 0.07747207581996918], [348, 198, 0.06537438929080963], [348, 198, 0.06537438929080963], [351, 189, 0.05164114385843277], [351, 189, 0.05164114385843277], [353, 179, 0.04172259569168091], [353, 179, 0.04172259569168091], [353, 170, 0.030382415279746056], [353, 170, 0.030382415279746056], [353, 162, 0.028278380632400513], [353, 162, 0.028278380632400513], [351, 155, 0.021065184846520424], [351, 155, 0.021065184846520424], [347, 151, 0.04239749163389206], [347, 151, 0.04239749163389206], [342, 148, 0.04567672684788704], [342, 148, 0.04567672684788704], [335, 147, 0.08347674459218979], [335, 147, 0.08347674459218979], [329, 148, 0.1007971465587616], [329, 148, 0.1007971465587616], [321, 151, 0.11591748148202896], [321, 151, 0.11591748148202896], [313, 155, 0.12670668959617615], [313, 155, 0.12670668959617615], [306, 161, 0.14200818538665771], [306, 161, 0.14200818538665771], [300, 169, 0.13957683742046356], [300, 169, 0.13957683742046356], [295, 177, 0.13129983842372894], [295, 177, 0.13129983842372894], [291, 187, 0.1320871263742447], [291, 187, 0.1320871263742447], [289, 199, 0.13875143229961395], [289, 199, 0.13875143229961395], [288, 211, 0.13405950367450714], [288, 211, 0.13405950367450714], [287, 225, 0.12846167385578156], [287, 225, 0.12846167385578156], [286, 242, 0.13157504796981812], [286, 242, 0.13157504796981812], [284, 260, 0.12673556804656982], [284, 260, 0.12673556804656982], [282, 279, 0.12965832650661469], [282, 279, 0.12965832650661469], [278, 297, 0.12411563098430634], [278, 297, 0.12411563098430634], [273, 314, 0.11592590063810349], [273, 314, 0.11592590063810349], [268, 331, 0.09634152054786682], [268, 331, 0.09634152054786682], [261, 347, 0.09203494340181351], [261, 347, 0.09203494340181351], [254, 361, 0.09106213599443436], [254, 361, 0.09106213599443436], [247, 374, 0.09351202100515366], [247, 374, 0.09351202100515366], [241, 384, 0.09549441188573837], [241, 384, 0.09549441188573837], [235, 393, 0.10260351747274399], [235, 393, 0.10260351747274399], [230, 399, 0.1113036498427391], [230, 399, 0.1113036498427391], [225, 403, 0.1114945337176323], [225, 403, 0.1114945337176323], [220, 406, 0.1133820191025734], [220, 406, 0.1133820191025734], [216, 408, 0.11124877631664276], [216, 408, 0.11124877631664276], [212, 409, 0.11465084552764893], [212, 409, 0.11465084552764893], [209, 409, 0.09638097882270813], [209, 409, 0.09638097882270813], [205, 407, 0.07789141684770584], [205, 407, 0.07789141684770584], [203, 405, 0.06274508684873581], [203, 405, 0.06274508684873581], [202, 400, 0.049661774188280106], [202, 400, 0.049661774188280106], [201, 393, 0.042405396699905396], [201, 393, 0.042405396699905396], [202, 385, 0.033798858523368835], [202, 385, 0.033798858523368835], [204, 375, 0.025125853717327118], [204, 375, 0.025125853717327118], [207, 365, 0.03232784941792488], [207, 365, 0.03232784941792488], [211, 356, 0.024205047637224197], [211, 356, 0.024205047637224197], [213, 351, 0.02998504601418972], [213, 351, 0.02998504601418972], [219, 342, 0.05675305053591728], [219, 342, 0.05675305053591728], [224, 338, 0.07420715689659119], [224, 338, 0.07420715689659119], [228, 336, 0.09389746189117432], [228, 336, 0.09389746189117432], [233, 334, 0.09931567311286926], [233, 334, 0.09931567311286926], [237, 334, 0.09487881511449814], [237, 334, 0.09487881511449814], [241, 334, 0.0882887914776802], [241, 334, 0.0882887914776802], [244, 335, 0.07312130928039551], [244, 335, 0.07312130928039551], [248, 337, 0.07724542170763016], [248, 337, 0.07724542170763016], [251, 339, 0.0743265375494957], [251, 339, 0.0743265375494957], [254, 343, 0.08216888457536697], [254, 343, 0.08216888457536697], [257, 349, 0.07989513874053955], [257, 349, 0.07989513874053955], [260, 356, 0.09155666828155518], [260, 356, 0.09155666828155518], [262, 364, 0.10707665979862213], [262, 364, 0.10707665979862213], [264, 373, 0.1166660487651825], [264, 373, 0.1166660487651825], [266, 380, 0.12805569171905518], [266, 380, 0.12805569171905518], [269, 386, 0.1228160411119461], [269, 386, 0.1228160411119461], [272, 391, 0.13008242845535278], [272, 391, 0.13008242845535278], [276, 394, 0.11485818773508072], [276, 394, 0.11485818773508072], [281, 396, 0.10625335574150085], [281, 396, 0.10625335574150085], [286, 396, 0.10134832561016083], [286, 396, 0.10134832561016083], [292, 395, 0.0991026908159256], [292, 395, 0.0991026908159256], [298, 392, 0.09392157196998596], [298, 392, 0.09392157196998596], [304, 388, 0.0866011381149292], [304, 388, 0.0866011381149292], [310, 384, 0.0831918939948082], [310, 384, 0.0831918939948082], [316, 379, 0.06923388689756393], [316, 379, 0.06923388689756393], [321, 374, 0.06559820473194122], [321, 374, 0.06559820473194122], [326, 368, 0.06219625845551491], [326, 368, 0.06219625845551491], [330, 362, 0.04988650605082512], [330, 362, 0.04988650605082512], [333, 355, 0.0366811528801918], [333, 355, 0.0366811528801918], [336, 347, 0.03301025554537773], [336, 347, 0.03301025554537773], [338, 339, 0.025442687794566154], [338, 339, 0.025442687794566154], [340, 331, 0.02442041039466858], [340, 331, 0.02442041039466858], [341, 325, 0.023859558627009392], [341, 325, 0.023859558627009392], [342, 322, 0.034950438886880875], [342, 322, 0.034950438886880875], [342, 320, 0.03163989260792732], [342, 320, 0.03163989260792732], [343, 320, 0.06426709145307541], [343, 320, 0.06426709145307541], [342, 324, 0.08303390443325043], [342, 324, 0.08303390443325043], [341, 330, 0.09961611777544022], [341, 330, 0.09961611777544022], [339, 338, 0.10454882681369781], [339, 338, 0.10454882681369781], [336, 346, 0.11378902941942215], [336, 346, 0.11378902941942215], [335, 354, 0.11016982793807983], [335, 354, 0.11016982793807983], [333, 362, 0.10425103455781937], [333, 362, 0.10425103455781937], [332, 368, 0.08561252057552338], [332, 368, 0.08561252057552338], [332, 373, 0.0796857625246048], [332, 373, 0.0796857625246048], [332, 377, 0.07435940206050873], [332, 377, 0.07435940206050873], [332, 381, 0.07681964337825775], [332, 381, 0.07681964337825775], [333, 384, 0.0737505778670311], [333, 384, 0.0737505778670311], [335, 388, 0.08030401915311813], [335, 388, 0.08030401915311813], [336, 392, 0.08866720646619797], [336, 392, 0.08866720646619797], [339, 395, 0.09469097852706909], [339, 395, 0.09469097852706909], [341, 399, 0.10257989168167114], [341, 399, 0.10257989168167114], [344, 401, 0.1033935546875], [344, 401, 0.1033935546875], [347, 402, 0.1075323149561882], [347, 402, 0.1075323149561882], [351, 402, 0.10188641399145126], [351, 402, 0.10188641399145126], [355, 399, 0.10536468774080276], [355, 399, 0.10536468774080276], [359, 395, 0.10794641077518463], [359, 395, 0.10794641077518463], [364, 389, 0.09928591549396515], [364, 389, 0.09928591549396515], [369, 382, 0.09948235750198364], [369, 382, 0.09948235750198364], [374, 374, 0.09778060764074326], [374, 374, 0.09778060764074326], [378, 366, 0.09708276391029358], [378, 366, 0.09708276391029358], [382, 358, 0.08164294064044952], [382, 358, 0.08164294064044952], [386, 349, 0.08028949052095413], [386, 349, 0.08028949052095413], [388, 342, 0.0605655200779438], [388, 342, 0.0605655200779438], [390, 338, 0.05879354849457741], [390, 338, 0.05879354849457741], [391, 336, 0.05378158390522003], [391, 336, 0.05378158390522003], [391, 336, 0.04755410924553871], [390, 336, 0.039105866104364395], [390, 336, 0.039105866104364395], [389, 338, 0.05441915988922119], [389, 338, 0.05441915988922119], [387, 341, 0.0671452060341835], [387, 341, 0.0671452060341835], [385, 346, 0.09107726812362671], [385, 346, 0.09107726812362671], [384, 351, 0.10407190024852753], [384, 351, 0.10407190024852753], [383, 358, 0.12300314009189606], [383, 358, 0.12300314009189606], [382, 365, 0.1301594227552414], [382, 365, 0.1301594227552414], [381, 373, 0.13755792379379272], [381, 373, 0.13755792379379272], [381, 380, 0.13707052171230316], [381, 380, 0.13707052171230316], [381, 386, 0.13680706918239594], [381, 386, 0.13680706918239594], [381, 392, 0.1332053542137146], [381, 392, 0.1332053542137146], [383, 396, 0.12831979990005493], [383, 396, 0.12831979990005493], [385, 399, 0.12151507288217545], [385, 399, 0.12151507288217545], [387, 401, 0.12155291438102722], [387, 401, 0.12155291438102722], [390, 402, 0.10740926861763], [390, 402, 0.10740926861763], [393, 401, 0.1058226004242897], [393, 401, 0.1058226004242897], [397, 399, 0.10320370644330978], [397, 399, 0.10320370644330978], [400, 395, 0.10940448194742203], [400, 395, 0.10940448194742203], [405, 389, 0.1071304902434349], [405, 389, 0.1071304902434349], [409, 382, 0.10395275801420212], [409, 382, 0.10395275801420212], [414, 373, 0.10282544046640396], [414, 373, 0.10282544046640396], [419, 363, 0.1023205891251564], [419, 363, 0.1023205891251564], [425, 351, 0.10307195782661438], [425, 351, 0.10307195782661438], [431, 337, 0.08484228700399399], [431, 337, 0.08484228700399399], [437, 322, 0.058346617966890335], [437, 322, 0.058346617966890335], [444, 304, 0.03544900566339493], [444, 304, 0.03544900566339493], [451, 286, 0.027620727196335793], [451, 286, 0.027620727196335793], [458, 268, 0.01697000116109848], [458, 268, 0.01697000116109848], [464, 250, 0.01964498870074749], [464, 250, 0.01964498870074749], [471, 233, 0.02448919601738453], [471, 233, 0.02448919601738453], [476, 218, 0.0435134582221508], [476, 218, 0.0435134582221508], [481, 204, 0.06046478450298309], [481, 204, 0.06046478450298309], [482, 198, 0.08797366172075272], [482, 198, 0.08797366172075272], [485, 189, 0.11267352104187012], [485, 189, 0.11267352104187012], [487, 181, 0.136690154671669], [487, 181, 0.136690154671669], [488, 175, 0.14801377058029175], [488, 175, 0.14801377058029175], [488, 171, 0.15181994438171387], [488, 171, 0.15181994438171387], [488, 168, 0.16651052236557007], [488, 168, 0.16651052236557007], [488, 166, 0.1486036628484726], [488, 166, 0.1486036628484726], [488, 165, 0.1374804973602295], [488, 165, 0.1374804973602295], [488, 164, 0.1267087459564209], [488, 164, 0.1267087459564209], [488, 164, 0.11431045830249786], [488, 166, 0.10123364627361298], [488, 166, 0.10123364627361298], [487, 171, 0.10276660323143005], [487, 171, 0.10276660323143005], [486, 180, 0.09934665262699127], [486, 180, 0.09934665262699127], [483, 191, 0.11570589989423752], [483, 191, 0.11570589989423752], [480, 205, 0.12049712985754013], [480, 205, 0.12049712985754013], [475, 223, 0.1272435039281845], [475, 223, 0.1272435039281845], [470, 240, 0.12935419380664825], [470, 240, 0.12935419380664825], [464, 259, 0.13176122307777405], [464, 259, 0.13176122307777405], [458, 278, 0.12839895486831665], [458, 278, 0.12839895486831665], [453, 294, 0.13192923367023468], [453, 294, 0.13192923367023468], [448, 310, 0.13184262812137604], [448, 310, 0.13184262812137604], [443, 324, 0.13390496373176575], [443, 324, 0.13390496373176575], [438, 337, 0.14270281791687012], [438, 337, 0.14270281791687012], [434, 349, 0.14343436062335968], [434, 349, 0.14343436062335968], [431, 359, 0.14759942889213562], [431, 359, 0.14759942889213562], [428, 369, 0.14983414113521576], [428, 369, 0.14983414113521576], [425, 378, 0.1541871279478073], [425, 378, 0.1541871279478073], [423, 385, 0.14117273688316345], [423, 385, 0.14117273688316345], [422, 390, 0.13344955444335938], [422, 390, 0.13344955444335938], [422, 394, 0.10963262617588043], [422, 394, 0.10963262617588043], [422, 396, 0.09818136692047119], [422, 396, 0.09818136692047119], [422, 396, 0.07008951157331467], [424, 396, 0.05263778567314148], [424, 396, 0.05263778567314148], [425, 393, 0.03141564875841141], [425, 393, 0.03141564875841141], [426, 388, 0.024789704009890556], [426, 388, 0.024789704009890556], [428, 382, 0.012094543315470219], [428, 382, 0.012094543315470219], [429, 375, 0.014807037077844143], [429, 375, 0.014807037077844143], [430, 367, 0.017531737685203552], [430, 367, 0.017531737685203552], [432, 357, 0.02597396820783615], [432, 357, 0.02597396820783615], [433, 348, 0.026317626237869263], [433, 348, 0.026317626237869263], [436, 338, 0.04934787005186081], [436, 338, 0.04934787005186081], [439, 328, 0.0609215684235096], [439, 328, 0.0609215684235096], [442, 319, 0.07708529382944107], [442, 319, 0.07708529382944107], [445, 311, 0.09078127890825272], [445, 311, 0.09078127890825272], [450, 303, 0.0978260487318039], [450, 303, 0.0978260487318039], [454, 296, 0.09626541286706924], [454, 296, 0.09626541286706924], [458, 289, 0.09619851410388947], [458, 289, 0.09619851410388947], [463, 283, 0.07893109321594238], [463, 283, 0.07893109321594238], [468, 276, 0.0740431547164917], [468, 276, 0.0740431547164917], [474, 270, 0.07452038675546646], [474, 270, 0.07452038675546646], [479, 265, 0.07265865802764893], [479, 265, 0.07265865802764893], [484, 260, 0.05299749597907066], [484, 260, 0.05299749597907066], [488, 256, 0.057195402681827545], [488, 256, 0.057195402681827545], [492, 254, 0.053168028593063354], [492, 254, 0.053168028593063354], [494, 253, 0.06194448843598366], [494, 253, 0.06194448843598366], [496, 254, 0.07248111069202423], [496, 254, 0.07248111069202423], [497, 258, 0.08885275572538376], [497, 258, 0.08885275572538376], [497, 264, 0.09116095304489136], [497, 264, 0.09116095304489136], [496, 272, 0.11349819600582123], [496, 272, 0.11349819600582123], [496, 282, 0.12559686601161957], [496, 282, 0.12559686601161957], [495, 292, 0.13362237811088562], [495, 292, 0.13362237811088562], [494, 301, 0.1304834634065628], [494, 301, 0.1304834634065628], [494, 310, 0.12364157289266586], [494, 310, 0.12364157289266586], [493, 318, 0.11453906446695328], [493, 318, 0.11453906446695328], [492, 325, 0.10321033000946045], [492, 325, 0.10321033000946045], [490, 331, 0.09946969896554947], [490, 331, 0.09946969896554947], [488, 336, 0.09887521713972092], [488, 336, 0.09887521713972092], [484, 340, 0.11527511477470398], [484, 340, 0.11527511477470398], [480, 343, 0.11799545586109161], [480, 343, 0.11799545586109161], [475, 346, 0.13819943368434906], [475, 346, 0.13819943368434906], [470, 347, 0.14406754076480865], [470, 347, 0.14406754076480865], [465, 347, 0.14935320615768433], [465, 347, 0.14935320615768433], [459, 342, 0.15909887850284576], [459, 342, 0.15909887850284576], [457, 337, 0.1527075171470642], [457, 337, 0.1527075171470642], [457, 331, 0.14425979554653168], [457, 331, 0.14425979554653168], [457, 325, 0.11662939190864563], [457, 325, 0.11662939190864563], [458, 319, 0.10382873564958572], [458, 319, 0.10382873564958572], [459, 315, 0.08586034923791885], [459, 315, 0.08586034923791885], [460, 312, 0.08195684850215912], [460, 312, 0.08195684850215912], [461, 311, 0.07445681840181351], [461, 311, 0.07445681840181351], [462, 311, 0.06531161814928055], [462, 311, 0.06531161814928055], [462, 311, 0.05417666584253311], [462, 313, 0.07648202776908875], [462, 313, 0.07648202776908875], [463, 317, 0.082918182015419], [463, 317, 0.082918182015419], [464, 322, 0.11846603453159332], [464, 322, 0.11846603453159332], [466, 328, 0.1310865432024002], [466, 328, 0.1310865432024002], [469, 334, 0.15437401831150055], [469, 334, 0.15437401831150055], [472, 340, 0.15753301978111267], [472, 340, 0.15753301978111267], [476, 345, 0.15872815251350403], [476, 345, 0.15872815251350403], [480, 350, 0.15829433500766754], [480, 350, 0.15829433500766754], [490, 359, 0.14389251172542572], [490, 359, 0.14389251172542572], [495, 363, 0.14632360637187958], [495, 363, 0.14632360637187958], [501, 365, 0.14573410153388977], [501, 365, 0.14573410153388977], [507, 367, 0.14220719039440155], [507, 367, 0.14220719039440155], [514, 368, 0.13889166712760925], [514, 368, 0.13889166712760925], [521, 368, 0.13914306461811066], [521, 368, 0.13914306461811066], [529, 366, 0.13851812481880188], [529, 366, 0.13851812481880188], [537, 364, 0.13827919960021973], [537, 364, 0.13827919960021973], [545, 360, 0.1379048228263855], [545, 360, 0.1379048228263855], [553, 356, 0.11908615380525589], [553, 356, 0.11908615380525589], [561, 351, 0.11786126345396042], [561, 351, 0.11786126345396042], [573, 338, 0.08947912603616714], [573, 338, 0.08947912603616714], [578, 331, 0.06585189700126648], [578, 331, 0.06585189700126648], [581, 324, 0.05052926763892174], [581, 324, 0.05052926763892174], [584, 317, 0.040987975895404816], [584, 317, 0.040987975895404816], [585, 311, 0.029424011707305908], [585, 311, 0.029424011707305908], [585, 302, 0.036945097148418427], [585, 302, 0.036945097148418427], [583, 300, 0.03907644748687744], [583, 300, 0.03907644748687744], [580, 298, 0.06604653596878052], [580, 298, 0.06604653596878052], [577, 298, 0.07656781375408173], [577, 298, 0.07656781375408173], [572, 299, 0.0970802903175354], [572, 299, 0.0970802903175354], [561, 305, 0.11451498419046402], [561, 305, 0.11451498419046402], [555, 311, 0.12496811151504517], [555, 311, 0.12496811151504517], [550, 318, 0.13454574346542358], [550, 318, 0.13454574346542358], [545, 326, 0.17290566861629486], [545, 326, 0.17290566861629486], [540, 347, 0.22514623403549194], [540, 347, 0.22514623403549194], [540, 357, 0.2460012137889862], [540, 357, 0.2460012137889862], [542, 366, 0.24738655984401703], [542, 366, 0.24738655984401703], [545, 373, 0.24320532381534576], [545, 373, 0.24320532381534576], [552, 379, 0.23707129061222076], [552, 379, 0.23707129061222076], [560, 382, 0.22376061975955963], [560, 382, 0.22376061975955963], [583, 384, 0.20742599666118622], [583, 384, 0.20742599666118622], [597, 382, 0.20172223448753357], [597, 382, 0.20172223448753357], [630, 372, 0.1540486216545105], [630, 372, 0.1540486216545105], [645, 368, 0.11239282041788101], [645, 368, 0.11239282041788101], [653, 365, 0.09969577193260193], [653, 365, 0.09969577193260193], [660, 364, 0] ] ]38:[{"id":"300fe80106010a0cb544fb8a09f943f6b88274a5b81b3ba6bd2c1269cda5d18e678e97874294c6e57cae167d0d8a7dd40ec33ec0e64c12c39aa2ece59335cd4e","href":"https://static.observableusercontent.com/files/300fe80106010a0cb544fb8a09f943f6b88274a5b81b3ba6bd2c1269cda5d18e678e97874294c6e57cae167d0d8a7dd40ec33ec0e64c12c39aa2ece59335cd4e","name":"image.png","type":"image/png","lastModified":1631628672549.898,"size":3123204},{"id":"94d60352db92dd05261e389f19bb88f1b96842f9eeb9622b0b2b731d382a9c4152c0430adf59df8938afe30c170694d3be6a19a14d0778d91c7725084fc85ff1","href":"https://static.observableusercontent.com/files/94d60352db92dd05261e389f19bb88f1b96842f9eeb9622b0b2b731d382a9c4152c0430adf59df8938afe30c170694d3be6a19a14d0778d91c7725084fc85ff1","name":"freehand (1).png","type":"image/png","lastModified":1631885462857.897,"size":440724},{"id":"7d73951a6ff6c5932c0f90f7d75c4154dff1ecb0785ad55da9e8b2536aace5848bef01ab0b5f2f56a70a1d45ddbc8f64a63f27efbf3d93455c67b330e5d0344c","href":"https://static.observableusercontent.com/files/7d73951a6ff6c5932c0f90f7d75c4154dff1ecb0785ad55da9e8b2536aace5848bef01ab0b5f2f56a70a1d45ddbc8f64a63f27efbf3d93455c67b330e5d0344c","name":"freehand (3).png","type":"image/png","lastModified":1631885453399.144,"size":729203},{"id":"b6f85e9d0c9f38689491995671f21b06118f4479f5ae86b2b5b69caa9f355f1aceb617d78ca3fb8194926a8451cbbfbc1508dba5f11aba7a73def917152064b4","href":"https://static.observableusercontent.com/files/b6f85e9d0c9f38689491995671f21b06118f4479f5ae86b2b5b69caa9f355f1aceb617d78ca3fb8194926a8451cbbfbc1508dba5f11aba7a73def917152064b4","name":"freehand (5).png","type":"image/png","lastModified":1631885439355.33,"size":381562},{"id":"fb64dbc41093e2b6242943dee38720ac4b957cda024db0dca926d668fc24bef7de6a2135aeb3e55c34d4d6e1bb2315f6940c10307b715514bf678bef25f74380","href":"https://static.observableusercontent.com/files/fb64dbc41093e2b6242943dee38720ac4b957cda024db0dca926d668fc24bef7de6a2135aeb3e55c34d4d6e1bb2315f6940c10307b715514bf678bef25f74380","name":"freehand (6).png","type":"image/png","lastModified":1631885434120.839,"size":503413}] 32:{"id":"83c6a92802b1af12","slug":"neon-graffiti","title":"Neon Graffiti","thumbnail":"d1c41da4a132ccc9624eec6f054e8643e96cca01360e822d460b47c1af137ed6","access_level":"public","create_time":"$D2021-09-14T13:04:13.746Z","update_time":"$D2021-09-17T15:44:10.863Z","view_time":null,"first_public_time":"$D2021-09-14T15:34:59.929Z","has_unpublished_edits":null,"fork":{"id":"e57692300453779b","slug":"interactive-svg","title":"Interactive SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":23,"starred":false,"owner":{"type":"team","id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":"starter_2024"},"version":506,"publish_version":506,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null}],"members":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Neon Graffiti","cells":[{"id":0,"value":"# Neon Graffiti\n\nClick on any of these palettes to try out different color schemes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof strokeColor = color({\n value: \"#7fd4ff\",\n title: \"Glass Tube Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof fillColor = color({\n value: \"#ffffff\",\n title: \"Neon Gas Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof shadowColor = color({\n value: \"#33bbff\",\n title: \"Glow Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof backgroundShadowColor = color({\n value: \"#000000\",\n title: \"Drop Shadow Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof backgroundColor = color({\n value: \"#132964\",\n title: \"Background Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"viewof finalBlur = Inputs.range([0, 50], {\n value: 16,\n step: 1,\n label: \"Spread\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"viewof finalTransparency = Inputs.range([0, 1], {value: .8, step: .01, label: \"Brightness\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof numLayers = Inputs.range([0, 6], {\n value: 5,\n step: 1,\n label: \"Glow Smoothing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"## Description\n\nI've seen a lot of art in Bushwick, which looks like 3d neon lights. I love the effect, so I decided to try and replicate it digitally.\n\nThe illusion requires four steps. First, we draw a bright white line. The bright white represents the glowing neon gas inside the light. Then we draw a colored outline. The color denotes the glass which surrounds the neon. Third, we add multiple layers of colored shadows. The shadows make the drawing seem like it is casting light on the surroundings. Finally, we add a single solid shadow to create a sense of depth.\n\nCredit for the idea goes to [Adam K. Fujita](https://www.adamkfujita.com/). You can support him by buying merch from his [store](https://adamfu.bigcartel.com/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"## Inspiration\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n[Shake Shack Tote Bag](https://www.adamkfujita.com/#/shake-shack/) by Adam Fujita.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"## Creations\n\n![freehand (6).png](${await FileAttachment(\"freehand (6).png\").url()})\n\n![freehand (5).png](${await FileAttachment(\"freehand (5).png\").url()})\n\n![freehand (3).png](${await FileAttachment(\"freehand (3).png\").url()})\n\n![freehand (1).png](${await FileAttachment(\"freehand (1).png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"htl.html`\n\n\nstyles code\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"## Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"currentPaletteCode = `createPalette(\"Label\", \"${strokeColor}\", \"${fillColor}\", \"${shadowColor}\", \"${backgroundShadowColor}\", \"${backgroundColor}\")`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"spreadInterpolate = bezierInterpolate(0.7, 0.1, 0.9, 0.3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"alphaInterpolate = bezierInterpolate(0.1, 0.5, 0.9, 0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"shadows = {\n let shadowString = \"\";\n for (let i = 0; i < numLayers; i++) {\n shadowString += `drop-shadow(0px 0px ${\n spreadInterpolate((i + 1) / numLayers) * finalBlur\n }px ${hexToRgba(\n shadowColor,\n alphaInterpolate((i + 1) / numLayers) * finalTransparency\n )}) \\n`;\n }\n return shadowString;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"function hexToRgba(hex, alpha) {\n const [r, g, b] = hex\n .replace(\n /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i,\n (m, r, g, b) => \"#\" + r + r + g + g + b + b\n )\n .substring(1)\n .match(/.{2}/g)\n .map((x) => parseInt(x, 16));\n\n return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"perfectFreehand = import(\n \"https://unpkg.com/perfect-freehand@1.0.4/dist/esm/index.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"import { color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"import { pbcopy } from \"@mbostock/copier\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"import { bezierInterpolate } from \"e7d4fef33e304f2b\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"