31:T491,md`# Gooey Halftone SVG Gradients Recently, I came across a [Getty publication](https://www.getty.edu/conservation/publications_resources/pdf_publications/pdf/atlas_halftone.pdf) about the history of halftone images. I decided to see if I could replicate the look of a letterpress-printed halftone image, using high-viscosity ink and high-pressure (see Figures 7 and 8d on page 10 of the document). For the technical implementation, I referenced Nadieh Bremer's posts ([here](https://www.visualcinnamon.com/2015/05/gooey-effect) and [here](https://www.visualcinnamon.com/2016/06/fun-data-visualizations-svg-gooey-effect)) about adding a "gooey effect" to SVG visualizations. As a starting point for the code, I used my previous notebook: [Halftone Gradient Banners](/@lemonnish/halftone-gradient-banners). Although that notebook implements both SVG and canvas elements, I only implement the SVG version below. --- In this first example, I implemented code from Nadieh's blog posts, with a tweak to match the colors in Safari to other browsers, and with the filter ID adapted to work in the Observable environment. Toggle between the gooey and non-gooey versions. `32:T7d6,{ // create svg const svg = d3.select(DOM.svg(bannerWidth, bannerHeight)) const defs = svg.append("defs") const colorPicks = colors[Object.keys(colors)[0]]//["greens"] // define gooey effect // based on http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/, // https://www.visualcinnamon.com/2015/05/gooey-effect let gooeyID; const filter = defs.append("filter") .attr("id", (gooeyID = DOM.uid("gooey")).id); filter.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 2.5) .attr("color-interpolation-filters", "sRGB") // added to fix lightening issue with Safari .attr("result", "blur"); // assign a name so it can be referenced by feColorMatrix filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -7') .attr('result','gooey'); // assign a name so it can be referenced by feComposite filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop') // valid values: over, in, atop, out, xor, lighter // define 1 generic row let rowID const row = defs.append("g") .attr("id", (rowID = DOM.uid("row")).id) for (let i = 0; i < numCols; i++) { row.append("circle") .attr("cx", getX(i)) .attr("cy", 0) .attr("r", getR(i)) } // background svg.append("rect") .attr("width", bannerWidth) .attr("height", bannerHeight) .attr("fill", colorPicks.start) // draw dots const dotLayer = svg.append("g") .attr("fill", colorPicks.end) // toggle gooey display if (displayGooey) dotLayer.attr("filter", gooeyID) for (let j = 0; j < numRows; j++) { dotLayer.append("use") .attr("href", rowID.href) // sufficient for most browsers .attr("xlink:href", rowID.href) // added for Safari compatibility .attr("transform", `translate(0, ${getY(j)})`) } return svg.node() }33:T4ba,md`--- ## How this works The above code applies a filter to the SVG group containing all elements to be filtered. In this case, the group contains all dots. The filter consists of three operations: 1. [feGaussianBlur](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur): blur the outlines of the dots 2. [feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix): multiply the image color channels by a matrix. For this particular implementation, the R, G, and B channels are preserved, and the alpha channel values are bifurcated and clamped between 0 (transparent) and 1 (opaque), with very few values in between. 3. [feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite): overlay the original content on top of the blurry content. This is useful if you "gooeyed" a patterned layer, and still want to see the distinct pattern. feComposite respects any alpha channel values. Because the dot layer is a solid color in this halftone example, the filter layer has no effect. For an example of a useful application of feComposite, see the last image on [this page](https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/). `34:T7d2,{ // create svg const svg = d3.select(DOM.svg(bannerWidth, bannerHeight)) const defs = svg.append("defs") const colorPicks = colors[Object.keys(colors)[1]] // define gooey effect // based on http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/, // https://www.visualcinnamon.com/2015/05/gooey-effect let gooeyID; const filter = defs.append("filter") .attr("id", (gooeyID = DOM.uid("gooey")).id); filter.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", selectStdDev) .attr("color-interpolation-filters", "sRGB") // added to fix lightening issue with Safari .attr("result", "blur"); // assign a name so it can be referenced by feColorMatrix if (display_feColorMatrix) { filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -7') .attr('result','gooey'); // assign a name so it can be referenced by feComposite filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop') // all valid values: over, in, atop, out, xor, lighter } // define 1 generic row let rowID const row = defs.append("g") .attr("id", (rowID = DOM.uid("row")).id) for (let i = 0; i < numCols; i++) { row.append("circle") .attr("cx", getX(i)) .attr("cy", 0) .attr("r", getR(i)) } // background svg.append("rect") .attr("width", bannerWidth) .attr("height", bannerHeight) .attr("fill", colorPicks.start) // draw dots const dotLayer = svg.append("g") .attr("fill", colorPicks.end) .attr("filter", gooeyID) for (let j = 0; j < numRows; j++) { dotLayer.append("use") .attr("href", rowID.href) // sufficient for most browsers .attr("xlink:href", rowID.href) // added for Safari compatibility .attr("transform", `translate(0, ${getY(j)})`) } return svg.node() }35:T7c9,{ // create svg const svg = d3.select(DOM.svg(bannerWidth, bannerHeight)) const defs = svg.append("defs") const colorPicks = colors[Object.keys(colors)[2]]//colors["blue-green"] // define gooey effect // based on http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/, // https://www.visualcinnamon.com/2015/05/gooey-effect let gooeyID; const filter = defs.append("filter") .attr("id", (gooeyID = DOM.uid("gooey")).id); filter.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 1.5) .attr("color-interpolation-filters", "sRGB") // added to fix lightening issue with Safari .attr("result", "blur"); // assign a name so it can be referenced by feColorMatrix filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values',`1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ${matrixVal_44} ${matrixVal_45}`) .attr('result','gooey'); // assign a name so it can be referenced by feComposite filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop') // all valid values: over, in, atop, out, xor, lighter // define 1 generic row let rowID const row = defs.append("g") .attr("id", (rowID = DOM.uid("row")).id) for (let i = 0; i < numCols; i++) { row.append("circle") .attr("cx", getX(i)) .attr("cy", 0) .attr("r", getR(i)) } // background svg.append("rect") .attr("width", bannerWidth) .attr("height", bannerHeight) .attr("fill", colorPicks.start) // draw dots const dotLayer = svg.append("g") .attr("fill", colorPicks.end) .attr("filter", gooeyID) for (let j = 0; j < numRows; j++) { dotLayer.append("use") .attr("href", rowID.href) // sufficient for most browsers .attr("xlink:href", rowID.href) // added for Safari compatibility .attr("transform", `translate(0, ${getY(j)})`) } return svg.node() }36:T7a2,{ // create svg const svg = d3.select(DOM.svg(bannerWidth, bannerHeight)) const defs = svg.append("defs") const colorPicks = colors[exColor] // define gooey effect // based on http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/, // https://www.visualcinnamon.com/2015/05/gooey-effect let gooeyID; const filter = defs.append("filter") .attr("id", (gooeyID = DOM.uid("gooey")).id); filter.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", exStdDev) .attr("color-interpolation-filters", "sRGB") // added to fix lightening issue with Safari .attr("result", "blur"); // assign a name so it can be referenced by feColorMatrix filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values',`1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ${exMatrix44} ${exMatrix45}`) .attr('result','gooey'); // assign a name so it can be referenced by feComposite filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop') // all valid values: over, in, atop, out, xor, lighter // define 1 generic row let rowID const row = defs.append("g") .attr("id", (rowID = DOM.uid("row")).id) for (let i = 0; i < numCols; i++) { row.append("circle") .attr("cx", getX(i)) .attr("cy", 0) .attr("r", getR(i)) } // background svg.append("rect") .attr("width", bannerWidth) .attr("height", bannerHeight) .attr("fill", colorPicks.start) // draw dots const dotLayer = svg.append("g") .attr("fill", colorPicks.end) .attr("filter", gooeyID) for (let j = 0; j < numRows; j++) { dotLayer.append("use") .attr("href", rowID.href) // sufficient for most browsers .attr("xlink:href", rowID.href) // added for Safari compatibility .attr("transform", `translate(0, ${getY(j)})`) } return svg.node() }37:T75c,{ // create svg const svg = d3.select(DOM.svg(bannerWidth, bannerHeight)) const defs = svg.append("defs") const colorPicks = colors[Object.keys(colors)[3]]//colors.greyscale // define gooey effect // based on http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/, // https://www.visualcinnamon.com/2015/05/gooey-effect let gooeyID; const filter = defs.append("filter") .attr("id", (gooeyID = DOM.uid("gooey")).id); if (true){ filter.append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 2.5) .attr("color-interpolation-filters", selectFilterValue) .attr("result", "blur"); // assign a name so it can be referenced by feColorMatrix } filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -7') .attr('result','gooey'); if (displayOptions === "feComposite") { filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop') } // define 1 generic row let rowID const row = defs.append("g") .attr("id", (rowID = DOM.uid("row")).id) for (let i = 0; i < numCols; i++) { row.append("circle") .attr("cx", getX(i)) .attr("cy", 0) .attr("r", getR(i)) } // background svg.append("rect") .attr("width", bannerWidth) .attr("height", bannerHeight) .attr("fill", colorPicks.start) // draw dots const dotLayer = svg.append("g") .attr("fill", colorPicks.end) .attr("filter", gooeyID) for (let j = 0; j < numRows; j++) { dotLayer.append("use") .attr("href", rowID.href) // sufficient for most browsers .attr("xlink:href", rowID.href) // added for Safari compatibility .attr("transform", `translate(0, ${getY(j)})`) } return svg.node() }38:[] 2f:{"title":"Gooey Halftone SVG Gradients","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"viewof displayGooey = checkbox({\n options: [{ value: \"gooey\", label: \"Gooey the image\" }],\n value: \"gooey\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"md`---\n## feGaussianBlur\n\nIncreasing the standard deviation of the blur increases the amount of fuzziness. Toggle feColorMatrix to show just the output of feGaussianBlur (just the blurry dots), rather than the gooey-ed final output.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"viewof display_feColorMatrix = checkbox({\n options: [{ value: \"feColorMatrix\", label: \"Include feColorMatrix in the filter\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"viewof selectStdDev = slider({\n title: \"Standard deviation for blur effect (blur amount)\",\n min: 0,\n max: 5,\n value: 2.5,\n step: .1\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"md`---\n## feColorMatrix\nThe matrix math to get the new color values looks like:\n\n${tex.block`\n\\begin{bmatrix}R'\\\\G'\\\\B'\\\\A'\\end{bmatrix} =\n\\begin{bmatrix}\n1 & 0 & 0 & 0 & 0\\\\\n0 & 1 & 0 & 0 & 0\\\\\n0 & 0 & 1 & 0 & 0\\\\\n0 & 0 & 0 & ${matrixVal_44} & ${matrixVal_45}\n\\end{bmatrix} * \n\\begin{bmatrix}R\\\\G\\\\B\\\\A\\\\1\\end{bmatrix}\n`}\n\nThe R, G, and B channels of each pixel are preserved, but the alpha channel for each pixel is assigned a new value of: A' = A * ${matrixVal_44} – ${-matrixVal_45}. This increases the range of values and adjusts the mean; because valid alpha values are between 0 and 1, any numbers that then fall outside that range are clipped.\n\nMove the sliders below to see the effect of changing the matrix values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"viewof matrixVal_44 = slider({\n title: \"Matrix value at (4,4)\",\n description: \"Starting value = 16\",\n min: 2,\n max: 100,\n step: 1,\n value: 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"viewof matrixVal_45 = slider({\n title: \"Matrix value at (4,5)\",\n description: \"Ideally, set to about -0.5 of the value at (4,4); Starting value = -7\",\n min: -50,\n max: -1,\n step: 1,\n value: -7\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"md`\n- If (4,4) = 2 and (4,5) = -1, the edges are fairly blurry.\n- If (4,4) = 100 and (4,5) = -50, the edges are extremely harsh and pixelated.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"md`---\n## All together now\n\nThe following image can be fully customized by the sliders below:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"viewof exColor = select({\n title: \"Color scheme\",\n options: Object.keys(colors),\n value: Object.keys(colors)[3]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"viewof exStdDev = slider({\n title: \"Standard deviation for blur effect (blur amount)\",\n description: \"Set to 0 to see the non-gooeyed image\",\n min: 0,\n max: 5,\n value: 2.5,\n step: .1\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"viewof exMatrix44 = slider({\n title: \"Matrix value at (4,4)\",\n description: \"Starting value = 16\",\n min: 2,\n max: 100,\n step: 1,\n value: 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"viewof exMatrix45 = slider({\n title: \"Matrix value at (4,5)\",\n description: \"Ideally, set to about -0.5 of the value at (4,4); Starting value = -7\",\n min: -50,\n max: -1,\n step: 1,\n value: -7\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`---\n## Safari display bug\n\nEarlier, I mentioned that I had to include a code tweak for Safari: for the feGaussianBlur filter element, I assign the attribute [color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color-interpolation-filters) the value of \"sRGB\" (source: [Safari bug report](https://bugs.webkit.org/show_bug.cgi?id=136418), [Stack Overflow](https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image)).\n\nWithout this fix, although the \"gooey\" elements remain fully opaque, their color is significantly lightened. If you're using Safari, you can clearly see this by toggling the dot overlay (implemented using feComposite).\n\nThe gaussian blur seems to display correctly in Chrome, but I didn't test in any other browsers.\n\n**Note:** The input options below will only affect the display if viewed in Safari.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof displayOptions = checkbox({\n options: [{ value: \"feComposite\", label: \"Include feComposite in gooey filter\" }],\n value: \"feComposite\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"viewof selectFilterValue = radio({\n title: \"Set 'color-interpolation-filters' value:\",\n options: [\n { label: 'No fix', value: '' },\n { label: 'Use sRGB', value: 'sRGB' },\n ],\n value: ''\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`---\n## Functions / calculated values\n\nNote that banner dimensions are calculated from the largest integer number of dots that will fit within the desired width/height – actual dimensions are sometimes smaller than desired dimensions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"bannerWidth = Math.min(640, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"bannerHeight = Math.max(200, Math.floor(bannerWidth * 5/16 / dotSpacing) * dotSpacing)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"numCols = Math.ceil(bannerWidth/dotSpacing) + 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"numRows = Math.ceil(bannerHeight/dotSpacing) + 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"getR = d3.scaleLinear()\n .domain([0, numCols-1])\n .range([0, dotSpacing/Math.sqrt(2)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"getX = i => i * dotSpacing","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"getY = i => i * dotSpacing","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"dotSpacing = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"colors = ({\n \"greens\": {start: \"#defca4\", end: \"#649603\"}, // palegreen -> green\n \"yellow-red\": {start: \"#ffe813\", end: \"#e34702\"}, // yellow -> red\n \"blue-green\": {start: \"#e2f2ff\", end: \"#31b79f\"}, // paleblue -> blue-green\n greyscale: {start: \"#eee\", end: \"#555\"}, // white -> black\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"import {slider, checkbox, select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}