Skip to main content
SimilarExport ZIP
100%

SVG + D3

✓ Published1🌍 Public
MMarta
Last edited Sep 26, 2024
Created on Sep 26, 2024
Forked from SVG + JS

A full-screen SVG pattern of 100 horizontal and vertical bars alternates in opacity according to two circular masks, revealing a central disc and its inverse. Using D3 v7, the code appends `rect` elements via `selectAll().data().join()`, sizing them by window dimensions. The masks are defined in SVG by combining a background `rect` with a `circle`, where white reveals and black conceals.

AI-generated description

Trying to learn how this thing works.

ISC Licensed

Similar vizzes

Loading thumbnail…

d3d3d3

This example shows a full-screen pattern of intersecting horizontal and vertical bars, each rendered as a set of thin SVG rectangles. The bars are generated using `d3.range` and joined to `rect` elements, but only the central circular area is visible due to two SVG masks. The first mask reveals the horizontal bars through a white circle on a black background, while the second mask hides the vertical bars in the same region using a black circle on white. The result is a cross-hatched grid with a circular cutout, built with React and D3 v7.

GGusnaRWX
86% match
Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

SSidney Oluoch
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how D3.js SVG masks can combine overlapping rectangular grids with symbolic cutouts to create intricate geometric patterns. The visualization renders 100 horizontal and vertical bars whose intersection is selectively revealed through two complementary masks. The first mask shows white space around circle, triangle, and cross symbols, while the second inverts this effect. Using D3’s `select`, `range`, `symbol`, and `symbols` APIs, the code generates SVG paths and applies mask attributes dynamically. The result is a layered interplay of shapes, highlighting SVG’s masking capabilities for pattern composition.

HHenrique Peixoto
85% match
Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko
84% match
Loading thumbnail…

SVG + JS

This example uses JavaScript and the SVG API to construct a full-screen pattern of thin vertical and horizontal rectangles. It defines two SVG groups, each masked by a circle: one group displays vertical lines, the other horizontal lines, with the masks being inverses of each other. The resulting visualization shows a grid of perpendicular lines, with a circular region in the center showing only vertical lines, while the surrounding area displays only horizontal lines. The code programmatically creates SVG elements, including masks and groups, without using any external visualization libraries.

MMarta
84% match
Loading thumbnail…

SVG Fundamental

This example creates a full-screen SVG image built entirely from programmatically generated rectangles. It demonstrates two different mask patterns that reveal a central circular area, with one mask applied to horizontal bars and another to vertical bars. The code uses D3.js version 6.6.1, specifically the `selection` module, alongside vanilla JavaScript DOM manipulation with `document.createElementNS` and SVG attributes. The rendering approach shows raw SVG element creation without using D3's data join or helper functions.

PPhilip W
84% match
Loading thumbnail…

First D3 Viz

This example creates a full-screen SVG pattern of intersecting horizontal and vertical bars, separated into two masked groups. D3’s `select` and `range` generate 100 rectangles per axis, while `symbol` and `symbols[7]` draw the star-shaped mask, and a circle forms the second mask. The masks reveal or hide parts of the grid, producing a geometric composition against a black-and-white backdrop. The visualization runs in a React framework using raw JavaScript and D3 v7, with no external data source.

Vvmistry94@gmail.com
84% match
Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

FFrancisco Ibelles
84% match