loolo

100%

✓ Published0🌍 Public

Last edited Oct 27, 2017

Created on Oct 27, 2017

Dots form the outline of an eye, then transition into the letters spelling "viSFest," using a Pixi.js canvas with animated sprites. The visualization uses d3.forceSimulation with forceX and forceY targeting coordinates extracted from an SVG path, plus forceCollide for spacing. A PIXI.RenderTexture snapshots a circle graphic for efficient rendering, and each frame updates sprite positions from the simulation. The code rasterizes text and an SVG eye outline into coordinate sets, cycling between these shapes as animation states.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

loolo

Dots form the outline of an eye, then transition to spell the word “viSFest.” The animation cycles between these two shapes. The visualization uses D3.js to manage a force simulation with x, y, and collision forces that move individual sprites toward target coordinates derived from rasterized text and an SVG path. Pixi.js renders the animated particles, which are drawn from a pre-rendered circle texture.

Aaktraiser

96% match

Loading thumbnail…

loolo

This animated visualization morphs between an eye outline and the text “viSFest” using a particle system. It rasterizes text and an SVG eye into coordinate maps, then uses D3's force simulation with collision detection to move colored dots toward the target positions. The scene is rendered with Pixi.js, alternating between the eye shape and the title in a continuous loop.

Aaktraiser

94% match

Loading thumbnail…

loolo

This animated visualization uses Pixi.js to render thousands of small blue dots as sprites, which transition between two distinct configurations. Initially, the dots assemble to form the outline of an eye, loaded from an SVG path. The animation then shifts the points to spell the word "viSFest" using a rasterized text target. A D3 force simulation with collision detection and velocity decay drives the smooth transition between states, with dots spawning at random positions when activated and disappearing when not needed. The dot radius and spacing are responsive to the window width, and the eye outline is proportionally scaled using the golden ratio.

Aaktraiser

94% match

Loading thumbnail…

Particle viSFest

A grid of small colored rectangles forms the word “viSFest,” with each rectangle initially scattered across the black canvas before a force simulation pulls them toward their target positions. Moving the mouse creates a wrecking-ball node that repels nearby rectangles, causing the text to slosh and deform before settling back. The code uses d3.forceSimulation with forceX, forceY, and forceCollide, while d3.scaleSequential with interpolateRainbow colors each rectangle based on its x-coordinate. The initial text shape is rasterized via Canvas getImageData, and rendering uses SVG rect elements without the gooey filter.

FFrissAnalytics

71% match

Loading thumbnail…

Particles

Hundreds of small, colored rectangles converge into the word “FRISS” before scattering apart. They then reform and slosh around as the mouse moves, creating a gooey, viscous effect. The code rasterizes text by drawing it to a Canvas and using `getImageData` to identify pixel locations as target points. A `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` animates the elements, while an SVG filter applies the gooey blur and color matrix.

FFrissAnalytics

69% match

Loading thumbnail…

Fork of Moving Dots - getting fancy

This example visualizes a dynamic wave pattern of 40 circles and connecting lines that oscillate vertically and change size over time. The circles and lines move in a sine-wave formation, with their positions and widths updating continuously to create a flowing, animated effect. The code uses D3.js version 6.6.1 with the `select`, `range`, and `join` APIs to efficiently update SVG elements, and runs an animation loop at 60 frames per second via `setInterval`. The chart renders entirely in SVG with no external data source, purely generated from mathematical functions.

Llt_vandegrift@live.com

68% match

Loading thumbnail…

Hello Lothar

This example displays a simple SVG face composed of a large yellow circle with a black outline for the head and two smaller unfilled circles for the eyes, all rendered directly in an HTML page. The static artwork is created using raw SVG elements—`<svg>`, `<circle>`, and attributes like `cx`, `cy`, `r`, `fill`, and `stroke`—within a basic HTML document, with CSS styling for the body margin and overflow. No interactive behavior or data binding is present; the visualization relies purely on declarative markup to produce the fixed composition.

Llok noe

68% match

Loading thumbnail…

lombris

A grid of circles animates across an SVG canvas, moving horizontally in a staggered wave. Each circle cycles through a sequence of horizontal positions, creating a looping motion synchronized by a per-circle delay. The fill color transitions from pale yellow to dark navy based on the circle’s index, using a linear scale with HCL interpolation. The animation is built with D3 v4’s `transition` and `d3.active`, while a separate module loads car data via a Promise and formats it with template literals.

Jjesramyep1263

67% match