Hexagonal SVG gradient experiment

100%

Hexagonal SVG gradient experiment

✓ Published0🌍 Public

Last edited Mar 6, 2019

Created on Jun 15, 2018

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.

AI-generated description

An experiment where I wanted to randomly fill a page with hexagons. Each hexagon has its own random gradient that is randomly oriented along 3 possible angles. The colors at both ends are then also randomly chosen.

This example uses the dark rainbow color palette. Another version has the option to choose between the dark rainbow and a green color palette

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/7ab7995a7ebd48ad424f218a5b01d30a'>Random gradients and orientations - Hexagons - 1 palette</a>

Similar vizzes

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

80% match

Loading thumbnail…

Color blending - Hexagon

Overlapping circles of varying colors and sizes drift within a hexagonal boundary, blending via the `mix-blend-mode` of `screen` to create luminous color transitions as they intersect. Animated with D3 v4’s `transition` system and random durations, each circle follows a random walk, while a clipped SVG group confines the motion. The piece uses a dark background and nine distinct hues to showcase additive blending effects.

AAjayyy

79% match

Loading thumbnail…

Dynamic Hexbin

Two thousand points sampled from a normal distribution drift in a circular path as the distribution’s center moves over time. A dynamic hexbin grid aggregates the points, with each hexagon’s fill color mapped sequentially from white to steelblue based on the number of points it contains. Built with D3 v4 and the d3-hexbin plugin, the animation uses d3.randomNormal to regenerate twenty points per frame and d3.timer to update the SVG paths continuously.

Mmbostock

77% match

Loading thumbnail…

Hexagonal Binning

This example demonstrates hexagonal binning, aggregating 10,000 randomly generated points from `d3.randomNormal` into a grid of hexagons using the `d3-hexbin` plugin for D3 4.0. Each hexagon’s fill color reflects the local point density via a sequential `d3.scaleSequential` with the `d3.interpolateMagma` color scheme. The SVG rendering includes white hexagon strokes for visual separation, plus top and left axes built with `d3.axisTop` and `d3.axisLeft` on identity scales.

Mmbostock

77% match

Loading thumbnail…

hexagon clip + blend

A grid of kitten images, each clipped to a hexagon shape, is arranged in a staggered pattern across the canvas. The images are layered with semi-transparent circles in pink, blue, and green, all using CSS screen blend modes to create overlapping color effects. The visualization is built with D3 v4, using SVG elements such as `clipPath` and `polygon` for the hexagonal clipping, and `append` with `.classed` to apply the clip. The code also references `d3.select` and `d3.scaleOrdinal` for color schemes, though the images come from external placeholder URLs.

PPatrick Wojda

77% match

Loading thumbnail…

hex-circle

The visualization shows six identical steelblue circles arranged symmetrically around the center of a square SVG canvas, each rotated 60 degrees apart from its neighbor. The code uses D3 v3 to append a group element for each of the six points, applying a rotation transform based on the index and a fixed translation of 100 pixels outward. Each group then contains a single circle with a radius of 10 pixels. The rendering relies on SVG’s `rotate` and `translate` transforms to position the circles in a hexagonal pattern, with no data beyond the integer range 0–5.

11wheel

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

74% match

Loading thumbnail…

Squares ↔ Hexagons

This example demonstrates a smooth morphing animation between two regular plane tilings: initially square cells transition into taller, non-regular hexagons. A grid of points is shifted horizontally by a changing offset each frame, and a Voronoi diagram is computed from these points using `d3.geom.voronoi`, rendering the resulting polygons as SVG paths. The offset moves point columns alternately, causing the cell shapes to transform continuously. The code uses `d3.timer` for the animation loop, with 2-pixel circles marking each generator point.

Mmbostock

74% match