Skip to main content
SimilarExport ZIP
100%

Fork Shape 3 strip

✓ Published0🌍 Public
JJetlinZ
Last edited Jun 1, 2022
Created on Jun 1, 2022
Forked from D3 Scatter Plot

A fork-shaped grid pattern emerges at the center of the visualization, created by layering two sets of 100 thin rectangular strips—horizontal and vertical—that intersect across the full screen. SVG masks with a star-like symbol shape reveal the fork form; one mask uses a black background with a white symbol to cut out the horizontal strips, while the second mask inverts the colors to expose the vertical strips against a white background. The code uses D3 selections, `range`, `symbol`, and `symbols` to generate the geometry.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork

An intricate geometric grid emerges as overlapping vertical and horizontal stripes alternate visibility through two SVG masks. Rendered with D3 v6 in React, the visualization layers 100 thin rectangles in each direction, with each mask containing all five D3 symbol shapes repeated across the canvas. The first mask reveals stripes through filled symbols, while the inverted second mask hides them, creating a woven optical effect where symbol outlines define the pattern. The result is a dynamic, mask-driven interplay of shapes and lines.

AAitorGD
90% match
Loading thumbnail…

Fork of Fork of Fork of Fork of SVG Fundamentals - D3 (group)

This example demonstrates a grid-based pattern created by overlaying horizontal and vertical rectangles, each clipped by a circular mask to reveal a central window. The visualization uses D3’s `select`, `range`, `append`, and `join` APIs to generate 100 vertical and 100 horizontal bars, which are grouped in separate `<g>` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse coloring to the bars, producing a crosshatched effect that is visible only within the circular region. The code runs in React and renders fully with SVG, drawing on D3 version 7.6.1.

SSidney Oluoch
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

A geometric pattern of horizontal and vertical lines intersects within a circular window, creating a crosshatched grid centered on the screen. The visualization uses two SVG masks to reveal alternating line orientations: one mask shows horizontal stripes through a white circle, while the other displays vertical stripes around it. Built with React and D3, the code generates 100 rect elements in each direction, then applies mask circles of 200-pixel radius to control visibility.

Ccoderhh
85% match
Loading thumbnail…

2Fork of Fork of Fork of Sol LeWitt-Inspired Shapes

This piece generates an abstract, colorful composition of rectangular blocks that repeat across a grid. Each block is subdivided into smaller vertical and horizontal strips with randomized RGB colors. D3 masks, defined by large scaled path symbols, selectively reveal and hide portions of the strips, creating a complex interlocking pattern. The code uses D3’s `select`, `range`, `symbols`, and custom mask rendering to build the SVG.

Aadventuresenglish.info@gmail.com
85% 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
84% match
Loading thumbnail…

Fork of d3 sol lewit

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, with two masks that reveal or hide different symbol shapes across the grid. The project uses D3 v6 APIs including `select`, `range`, `symbols`, and `symbol` to render the masked patterns. The two masks, created via `renderMask`, alternate between white and black backgrounds with the opposite fill for the symbols, producing a moiré-like interplay between the line grid and the overlaid symbol clusters. The code runs on a React framework and uses raw SVG rendering with dynamic window dimensions.

HHéloïse Feldmann
84% match
Loading thumbnail…

Fork of Fork of Sol Lewwit D3 1

This visualization uses D3 version 7.8.4 with level selection and join operations to generate a grid of horizontal and vertical rectangles. The SVG canvas spans the browser window, and two masks create overlapping circular regions. In the first mask, a white circle over a black rectangle reveals horizontal bars, while the second mask uses inverted colors to expose vertical bars. The resulting composition shows intersecting striped patterns emerging from the circular cutouts.

PPeiyang Li
83% match
Loading thumbnail…

Fork of HTML Starter Follow Along

This visualization displays a grid of thin horizontal and vertical rectangles, with a circular region in the center revealed by two mask layers. The first set of horizontal strips and vertical strips are generated using `d3.select`, `d3.range`, and the `.join` method to create SVG `rect` elements. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to create the central circular aperture, resulting in an intersecting crosshatch pattern.

CCharlie Smith
83% match