Skip to main content
SimilarExport ZIP
100%

Tiger 02 (rectangle points)

✓ Published0🌍 Public
WWill Carter
Last edited Sep 22, 2019
Created on Sep 22, 2019

This example reveals a hidden tiger through a pixelated mosaic built from small rectangles. Each rectangle’s color is sampled from a bitmap source image of a tiger, and its position is initially jumbled in the center of the canvas. When the page loads, the rectangles animate outward to their correct grid positions, creating a satisfying "unscramble" effect. The visualization uses D3 v4 with SVG and a smooth transition that sorts the shuffled points into place, showcasing the power of data-driven animation and the visual appeal of image reconstruction.

AI-generated description

D3.js Tiger 02 (rectangle points) Image processing (get color of each pixel in bitmap source image): https://pillow.readthedocs.io/en/stable/#

mit Licensed

Similar vizzes

Loading thumbnail…

Tiger 04 (random corners)

The visualization reconstructs a tiger image from pixel data, where each pixel is represented by a small colored rectangle. The data points fly in from one of four randomly chosen corners of the chart, creating an animated assembly effect as they settle into their correct positions. The rectangles transition with staggered delays, gradually revealing the full image as the opacity increases from 0 to 1. The color of each rectangle is determined by the pixel color of the original tiger bitmap. The animation is rendered in SVG with D3 v4, with the image being built from a shuffled sequence of data points that each move from a random corner to their final location, producing a lively, scatter-like effect before the tiger image becomes apparent.

WWill Carter
90% match
Loading thumbnail…

Tiger 03 (inverted)

This animation renders a pixelated image of a tiger, where the color of each rectangular cell is inverted from the original pixel color of the source bitmap. The D3.js code shuffles the order of the pixels and animates each square from a single starting point to its target position with a staggered delay, creating a sweeping "wipe" effect. As the rectangles settle into place, the inverted palette produces a striking negative-color representation of the tiger. The visualization uses an SVG canvas and is driven by D3 v4 transitions, with the underlying image data sourced from a gist.

WWill Carter
87% match
Loading thumbnail…

Tiger 01

This example uses D3.js to animate a scatterplot of 2,500 circles, each colored according to a pixel value from a bitmap image of a tiger. The data, stored as an array of coordinate-color pairs, is shuffled before rendering so the tiger emerges pixel by pixel. Circles transition from the top-right corner to their final positions over time, using a linear scale to map the image coordinates to the chart area. The result is a playful, animated reconstruction of the tiger image, with each circle’s fill color corresponding to its source pixel.

WWill Carter
84% match
Loading thumbnail…

Delete Me

This example displays a grid-based pixel art rendering of a tiger, with each cell colored according to a hex value stored in a flat data array. The visualization uses React and D3.js (v5), where the `tiger.js` file provides the coordinate and color data for each grid point. The code sets up an SVG canvas with fixed dimensions and margins, though the chart area is left empty in this starter template, as the rendering logic is not yet implemented. The project structure includes a React component that would eventually map the data to visual elements.

WWill Carter
71% match
Loading thumbnail…

Delete Me

This example displays a grid-based pixel art rendering of a tiger, with each cell colored according to a hex value stored in a flat data array. The visualization uses React and D3.js (v5), where the `tiger.js` file provides the coordinate and color data for each grid point. The code sets up an SVG canvas with fixed dimensions and margins, though the chart area is left empty in this starter template, as the rendering logic is not yet implemented. The project structure includes a React component that would eventually map the data to visual elements.

WWill Carter
71% match
Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel
68% match
Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock
66% match
Loading thumbnail…

Spiral Triangle

A mesmerizing, topologically impossible animation shows a spiral of black-stroked white squares rotating and translating within two triangular clipping regions. The piece recreates a GIF by PATAKK, using an SVG scene with upper and lower clip paths. The code uses d3.v3’s `d3.selectAll`, `d3.range`, and `d3.timer` to drive square transforms, while each square’s position and rotation are computed from a normalized index and elapsed time.

Mmbostock
66% match