SiLK

100%

✓ Published0🌍 Public

Last edited Dec 27, 2016

Created on Dec 27, 2016

SiLK generates an endless sequence of glowing white lightning bolts that streak horizontally across a black canvas, each bolt departing from the vertical center and ending at a random height. The animation runs on a 50-millisecond timer, repeatedly drawing a new bolt while fading the previous frame with a translucent black fill using Canvas `fillRect`. The code builds each bolt as a jagged polyline by stepping across the width, adding random vertical offsets, and then correcting the endpoint drift, all rendered with the Canvas 2D `stroke` API within a D3 v4 setup.

AI-generated description

forked from <a href='http://bl.ocks.org/SleepyHarry/'>SleepyHarry</a>'s block: <a href='http://bl.ocks.org/SleepyHarry/57a94dc08a79e16c72cec2270db012b0'>SiLK I</a>

forked from <a href='http://bl.ocks.org/SleepyHarry/'>SleepyHarry</a>'s block: <a href='http://bl.ocks.org/SleepyHarry/1018ea6e0b5d5bad2be16c473cfc4a49'>SiLK II</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SiLK

On a black canvas, SiLK continuously draws animated white lightning-like bolts from left to right. Each bolt is a jagged polyline whose vertical position shifts randomly as it advances, creating the effect of a crackling electric current. The visualization uses D3 v4’s `d3.randomNormal` to generate the jitter and the Canvas 2D API for drawing and fading. A semi-transparent black fill rectangle is painted each frame, causing older strokes to gradually fade while new bolts appear, producing a persistent, dynamic trail.

SSleepyHarry

95% match

Loading thumbnail…

SiLK

SiLK is a generative animation that continuously draws a single white line from the center of a black canvas to a point moving along a circle’s circumference. The line’s endpoint advances incrementally, creating an evolving, spirograph-like pattern that gradually fills the frame with faint afterimages, as each frame paints a low-opacity black rectangle over the previous content. Built with D3.js v4 and the Canvas API, the code uses `d3.select` to access the canvas context, `d3.range` to precompute angles, and a `setInterval` loop to drive the animation, with the skip value incrementing by a fractional amount each step to alter the path’s complexity. The rendering relies on `context.fillRect` for fading and `context.stroke` for line drawing, producing a hypnotic, ever-changing visual from a minimal algorithmic rule.

SSleepyHarry

87% match

Loading thumbnail…

SiLK

SiLK renders a continuously evolving, circular line drawing on a black canvas. A white curved path stretches from the center to a randomly selected point on the circumference, with each new segment appearing every 50 milliseconds. The drawing fades gradually as semi-transparent black rectangles overlay the previous frame, creating a persistent yet decaying trace. The visualization uses D3 v4 for canvas selection and color utilities, while all drawing happens directly through the Canvas `getContext('2d')` API, employing `quadraticCurveTo` for the curved strokes and `fillRect` for the fade effect.

SSleepyHarry

87% match

Loading thumbnail…

SiLK

A looping animation draws a thin white polyline across a black canvas, with each segment originating from the previous point and ending at a new point along a circular radius. The line gradually shifts its endpoint between two angular positions, creating a slowly evolving geometric pattern. The code uses a Canvas 2D context with a semi-transparent black fill rect for fading trails, and `setInterval` drives the animation while `d3.range` and `Math.cos`/`Math.sin` compute the circumference points.

SSleepyHarry

84% match

Loading thumbnail…

slinky

A single white line repeatedly traces the outline of a circle, but its shape is continuously warped by a sinusoidal modulation that scales and rotates each point’s radial position. The animation cycles through several periods of this distortion, making the circle appear to coil and uncoil like a slinky. The code uses D3’s `d3.timer` to update a `path` element, computing new coordinates for 1,000 sample points via a transformation that multiplies the base circle’s x- and y-coordinates by cosine and sine of the angle multiplied by a time-varying factor. The rendering relies on an SVG `path` with a thick white stroke over a dark background, leveraging the lodash and d3-jetpack helper libraries for utilities and concise syntax.

11wheel

69% match

Loading thumbnail…

Svelte + D3: Canvas & renderless components

Ten thousand semi-transparent dots pulse in a two-second loop, their positions, sizes, and magma-scale colors assigned by random functions mapped through D3 scales. Svelte components manage the lifecycle: a canvas component coordinates drawing and invalidation, while individual circle components use `svelte/motion` tweens to animate between updates, rendering efficiently via Canvas API calls.

MMatthias Stahl

67% 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

67% match

Loading thumbnail…

500 glowing dots

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

PPatrick Wojda

66% match