loolo

100%

✓ Published0🌍 Public

Last edited Oct 27, 2017

Created on Oct 27, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/aktraiser/'>aktraiser</a>'s block: <a href='http://bl.ocks.org/aktraiser/c86b5fbc42d8637f4f89487584d806fa'>loolo</a>

forked from <a href='http://bl.ocks.org/aktraiser/'>aktraiser</a>'s block: <a href='http://bl.ocks.org/aktraiser/d82c278e32c6a7bdc93e5e05be56fe4d'>loolo</a>

mit Licensed

Similar vizzes

Loading thumbnail…

loolo

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.

Aaktraiser

94% match

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

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

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

68% 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…

stars

This example animates a multi-line text introduction by first drawing the words along SVG `<textPath>` elements, then replacing the text with thousands of small, glowing star-shaped particles. The visualization uses D3 v5 to lay out the text on curved and straight paths, computes path endpoints and text lengths to align the words, and then spawns a canvas-based particle system with custom star sprites and additive blending. Each word is revealed by a burst of stars that traces along its path, while gradient fills and blur/contrast filters create a luminous, space-like effect. The animation cycles through the phrases, with mouse interaction disabled to keep the focus on the choreographed particle motion.

EEE2dev

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

66% match