Skip to main content
100%

Reasons to Remix

✓ Published0🌍 Public
Aaktraiser
Last edited Oct 23, 2017
Created on Oct 23, 2017

This animated visualization rearranges a grid of small hexagons into the shape of the “Reasons to R” logo, using color to create a gradient across the cells. Built with D3 v4 and Snap.svg, it computes hexagonal positions on an SVG canvas and uses Snap’s point-in-path detection to identify which hexagons fall within the custom R-shaped path. Those hexagons are then grouped and animated, scaling from their centers to fill the logo. The piece is a remix by Nadieh Bremer of the classic Reasons to logo, with color mapped linearly across eight hues and the title “Le Monde change! Nous vous aidons à changer avec lui” displayed above the hexagon grid.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Reasons to Remix

A remix of the "Reasons to" logo, this visualization fills the shape of the letter R with a grid of hexagonal cells. The hexagons are colored with a linear scale that transitions through a sequence of warm and cool hues, creating a gradient across the composition. Snap.svg is used to test which hexagon centers fall inside the R-shaped path, and only those cells are rendered. The design includes two rotated text labels—"Le monde change"—integrated into the composition. The animation is subtle, with the hexagons appearing in a staggered sequence to build the final mosaic.

Aaktraiser
95% 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
69% match
Loading thumbnail…

Vis. variations on Recamán sequence

This block presents seven animated visual variations of the Recamán sequence, showing paths drawn with different geometric shapes—circles, hexagons, losanges, squares, rounded squares, zed squares, and rounded pluses—derived from the same sequence of numbers. The main path animates via CSS keyframes using stroke-dashoffset, while thumbnails of each shape fade in sequentially and are clickable to switch the main visualization. Built with D3.js v5, the code computes the sequence programmatically and renders SVG paths with CSS animations for the reveal effect.

KKcnarf
67% match
Loading thumbnail…

Hexagonal SVG gradient experiment

A grid of hexagons fills the page, each one displaying a linear gradient oriented along one of three angles, with colors randomly drawn from a dark rainbow palette. The animation progressively reveals hexagons starting from the center, growing outward in a wave-like pattern. Built with D3 v5 and SVG, the code constructs hexagon paths using trigonometric calculations and applies randomized gradient definitions through the SVG `defs` element.

AAjayyy
67% match
Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis
67% 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
67% match
Loading thumbnail…

DevResults Logo

This example uses D3.js to recreate the DevResults logo mathematically, transforming a 6x6 grid of dots and a bar chart into a circular composition. The visualization demonstrates two key techniques: approximating circular dots with four Bézier curves (using the constant 0.551915024494 for control-point placement), and projecting points from a square grid onto a circle using a mathematical mapping. The result is an animated SVG logo where dots and bars warp to fit a circular envelope, with subtle color transitions, mimicking Illustrator's envelope distort effect in code.

HHerbCaudill
67% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Random world shapes with react July 4,2022 - 2

An array of small, colored rectangles is scattered across the screen, each positioned using a formulaic calculation based on its index. The visualization is rendered in SVG via React, with D3 v7 used to select the body and append the initial SVG element. The rectangles are generated from a simple loop that computes x and y coordinates from trigonometric and linear expressions, with stroke widths and RGB colors derived from the same calculation. The design appears algorithmic and abstract, without a clear geographic or data-driven mapping.

NNita
65% match