Color blending - Hexagon

100%

Color blending - Hexagon

✓ Published0🌍 Public

Last edited Jun 15, 2018

Created on Jun 15, 2018

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.

AI-generated description

This is the first example of my blog on Beautiful color blending effects with SVGs & D3

The hexagon introduction to the Color blending section of my OpenVis 2016 talk "SVGs beyond mere shapes". In this example the circles are given the mix-blend-mode of screen to get nice effects when the circles overlap each other.

Another color blending example can be found here

Infinity Showcase

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/bd3dd129b4a812828397a85db6ba36b7'>Color blending - Hexagon</a>

mit Licensed

Similar vizzes

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

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

79% match

Loading thumbnail…

D3 Transitions

Six colored circles float over a pale blue background as D3 transitions animate them into view. Each circle scales from radius zero to its full size with staggered delays, then repositions itself at new coordinates using a faster linear ease. The example uses `selection.join()` to manage enter and update states, applying `transition()` with explicit durations and `easeLinear` to control the motion. Data is defined inline in JavaScript, rendered as SVG circles with distinct fills and 0.667 opacity.

Pperez.h89@gmail.com

75% match

Loading thumbnail…

Gooey egde effect

A hexagon filled with colorful moving circles demonstrates a gooey edge-detection effect. The visualization applies an SVG filter using feGaussianBlur and feColorMatrix to create the gooey merging, then adds feConvolveMatrix to extract the edges of the merged shapes. A linear gradient fills the hexagon, which is defined as a clip path. The circles are positioned with random coordinates and animated via D3.js v4, with the filter defined in SVG defs and applied to the transformed circle group.

TThanaporn-sk

75% match

Loading thumbnail…

Gooey egde effect

Shifting circles confined within a hexagon produce a bold, gooey edge effect as they move and merge. The visualization applies an SVG filter chain—including `feGaussianBlur`, `feColorMatrix`, and `feConvolveMatrix`—to blur, threshold, and detect edges from the animated shapes. Built with D3 v4 and SVG, it uses a linear gradient fill and a clip path to constrain the motion, offering a dynamic exploration of filter-based visual styling.

KKcnarf

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

74% match

Loading thumbnail…

Circle Wave

Three semi-transparent rings in cyan, magenta, and yellow form undulating circular waves around a shared center. Each ring’s radius oscillates based on a cosine function modulated by time, creating a continuously morphing, layered pattern with a darken blend mode. The animation uses `d3.radialLine` to generate the wave paths from an array of 200 angles, while `d3.timer` drives the redraw of each SVG path every frame. The code relies on D3 v4’s SVG rendering and the `mix-blend-mode` CSS property to composite the overlapping strokes.

Mmbostock

74% match

Loading thumbnail…

Chained Transitions

Fifty black circles, each representing one step in a 50-point scale, are arranged along the left edge of an SVG. Chained transitions, created using `transition.transition` and `d3.active`, repeatedly sweep each circle horizontally across the frame and back, with staggered delays creating a cascading wave effect. The circles’ fill colors interpolate between light yellow and dark blue via a linear scale with `d3.interpolateHcl`. The animation runs concurrently on all elements, inheriting the original transition’s reference time to ensure synchronized looping.

Mmbostock

74% match