Skip to main content
SimilarExport ZIP
100%

hexagon clip + blend

✓ Published0🌍 Public
PPatrick Wojda
Last edited Dec 13, 2016
Created on Dec 12, 2016

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

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

animated distortion

A single kitten image is displayed on an SVG canvas, with its appearance continuously shifting through two different distortion effects. The visualization alternates between two SVG filters, each combining a `feTurbulence` fractal noise generator with a `feDisplacementMap` to warp the image’s pixels. A recursive `setTimeout` function in plain JavaScript toggles the active filter every 400 milliseconds for ten iterations, creating a rhythmic pulsing distortion. The code uses D3 v4 for SVG selection and attribute manipulation, while the image itself is loaded from an external placeholder service.

PPatrick Wojda
74% 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
72% 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
71% match
Loading thumbnail…

Hexagon Mesh

This interactive visualization displays a mesh of hexagons that users can paint by clicking and dragging with the mouse. A black outline dynamically traces the boundary between filled and unfilled hexagons. The grid is generated on the fly using TopoJSON's geometry data structures, transformed through a custom D3 geo projection to create regular hexagon shapes. The boundary outlines are computed using the `topojson.mesh` API with a filter that identifies edges separating filled from empty cells, rendered as SVG paths via `d3.geo.path`.

Mmbostock
71% 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
70% match
Loading thumbnail…

Fork of Fork of Circles with D3_check

A simple gray cat built from D3.js-drawn circles and lines sits centered on a pink canvas, with its body, head, ears, eyes, and nose formed by circle elements and its legs and tail as line elements. The example uses D3’s selection and join methods to bind static position data directly to SVG shapes, avoiding animation or interactivity. While the code’s data is hard-coded, the structure invites creative theming—such as Halloween or Christmas—by swapping the color palette or adding props, as suggested in the accompanying challenge notes.

Kkoteswararao614@gmail.com
68% match
Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel
68% match