CMYK halftone printing - chrome hack

100%

CMYK halftone printing - chrome hack

✓ Published0🌍 Public

Last edited Mar 2, 2018

Created on Feb 23, 2018

This example demonstrates CMYK halftone printing by animating a continuously morphing color pattern. The animation cycles through the rainbow spectrum, converting each RGB color to CMYK values that determine the radii of dots in four rotated, multiply-blended patterns. The visualization uses D3 v4 with SVG patterns and a d3.timer to drive the animation, while a d3.scaleSqrt maps each CMYK component to circle radius. The code also includes a Chrome-specific fix that prevents rendering issues when any CMYK value reaches zero.

AI-generated description

In veltman's orignial block, Chrome 64 (and probably other versions) displays a black rectangle when any of the svg>defs>pattern (mapping values of the CMYK space) uses a circle of radius 0.

A quick fix would be to not set any CMYK value to 0, eg. in rgbToCmyk return { cyan: Math.max(0.01, value), ... };

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/50a350e86de82278ffb2df248499d3e2'>CMYK halftone printing</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Chromatic Hover Sol LeWitt Art with D3

This example generates an abstract, grid-based composition inspired by Sol LeWitt, rendered as an SVG using D3.js. Two sets of thin rectangular strips, one horizontal and one vertical, are drawn across the full screen and masked by overlapping circular regions, creating a dynamic interplay of visible and hidden lines. A CSS animation continuously toggles the SVG’s fill and background colors between black and white, producing an inverted chromatic hover effect. The code relies on D3 selections, `range()`, and SVG `mask` elements to construct and layer the visual.

YYiorgos Bagakis

69% match

Loading thumbnail…

Circle Wave

Three concentric, overlapping circles in cyan, magenta, and yellow continuously deform into a shifting wave pattern on a dark background. A slider labeled “Frequency” adjusts the speed of the oscillation, while the shapes are drawn as closed radial-line paths that update every frame. The code uses D3 v4’s `d3.radialLine`, `d3.curveLinearClosed`, and `d3.timer`, with the stroke colors blended via CSS `mix-blend-mode: darken`. The radius of each point is computed from a cosine function and a time-based term, creating the rhythmic, breathing motion.

AAlainRo

69% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

Fifty circles arranged vertically cycle horizontally across the screen in an animated loop. Each circle’s fill color transitions from light yellow to dark navy based on its vertical position, using a linear scale with HSL interpolation. The example demonstrates SVG shape rendering and CSS styling, with animations driven by D3 v4’s `transition` and `d3.active()`. The code uses `d3.scalePoint` for layout and `d3.scaleLinear` for color mapping, all within a single SVG canvas.

Jjesramyep1263

68% match

Loading thumbnail…

TODO

This interactive tool visualizes color scales by plotting Bézier curves through multiple color spaces, including RGB, HSL, HCL, Lab, and Cubehelix. Users can edit input colors, adjust the number of output stops, and click to switch between basis and linear curve interpolation across each space’s channels. The page renders using SVG and includes animated draggable points on channel charts, with the current state shared via the URL. Forked from d3-based code by 1wheel, it addresses issues in Gregor Aisch’s Color Palette Helper for diverging scales.

11wheel

68% match

Loading thumbnail…

Circle Wave

Three semi-transparent rings in cyan, magenta, and yellow form undulating circular waves around a shared center. Each ring’s radius oscillates based on a cosine function modulated by time, creating a continuously morphing, layered pattern with a darken blend mode. The animation uses `d3.radialLine` to generate the wave paths from an array of 200 angles, while `d3.timer` drives the redraw of each SVG path every frame. The code relies on D3 v4’s SVG rendering and the `mix-blend-mode` CSS property to composite the overlapping strokes.

Mmbostock

68% match

Loading thumbnail…

Colour-full force

Twenty-eight colored circles drift across a black SVG canvas in a soft, gooey cluster. Each circle is assigned a rainbow hue and a random radius, with alternating circles receiving a blurred filter effect that makes them blend together. The motion is driven by D3’s `forceSimulation` with charge, center, and collision forces, while the rendering uses SVG circles and a `feGaussianBlur` with a `feColorMatrix` filter to create the liquid-like appearance.

AAlireza-Dezfoolian

68% match

Loading thumbnail…

#10print

A circular grid of slash marks continuously regenerates inside a black, round SVG canvas, its patterns and opacity driven by 3D Simplex noise. Each cell's rotation flips between slash and backslash, while opacity varies with the noise value, producing an organic, flickering maze. The animation runs via `d3.interval`, updating per-cell values and applying transitions with `attrTween`-like direct attributes. It uses D3 v4, the `simplex-noise.js` library, and draws SVG paths for the line characters.

KKcnarf

68% match

Loading thumbnail…

ColorBrewer Spline

This example converts the eleven-color ColorBrewer “PiYG” scheme into a continuous color scale by interpolating in RGB color space using uniform one-dimensional b-splines. It shows a set of circles representing the original discrete colors, with three channels plotted as red, green, and blue curves, alongside a canvas gradient that visualizes the resulting smooth interpolation. Using d3-scale-chromatic for the source colors, the code relies on d3.interpolateRgbBasis and d3.interpolateBasis to generate the continuous scale, while rendering the curves with SVG paths and the gradient via Canvas createImageData.

Mmbostock

67% match