SiLK

100%

✓ Published0🌍 Public

Last edited Dec 27, 2016

Created on Dec 27, 2016

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.

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>

forked from <a href='http://bl.ocks.org/SleepyHarry/'>SleepyHarry</a>'s block: <a href='http://bl.ocks.org/SleepyHarry/e4260ec4c41633488f5145d4563acb1f'>SiLK III</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SiLK

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.

SSleepyHarry

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

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

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

85% match

Loading thumbnail…

static-transition

A set of four parallel line charts displaying randomly generated data, with each chart independently redrawn every five seconds. The charts are rendered in SVG using D3's line generator and axes. Superimposed on top is a translucent canvas layer that constantly draws random black and white rectangles, creating a static-like visual noise effect. During each transition, the canvas alternately switches between drawing only black squares with a larger size and then both colors with a smaller size, while the underlying SVG charts update.

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

68% match

Loading thumbnail…

Random Fun Stuff

A canvas animation draws a continuously evolving radial burst of lines from the center of the screen. Using the HTML5 Canvas API's `getContext('2d')`, the code repeatedly strokes line segments from the center to coordinates computed from sine and cosine functions of the current time and angle. Each frame, a semi-transparent white rectangle gradually fades previous strokes, creating a fading trail effect. The animation runs via `requestAnimationFrame`, recalculating angles and positions with the `Date.now()` timestamp to produce a dynamic, rotating pattern.

CCurran Kelleher

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

67% match