Skip to main content
SimilarExport ZIP
100%

sol wit production with d3

✓ Published0🌍 Public
AAkshay
Last edited Nov 17, 2022
Created on Nov 17, 2022
Forked from design done

This example renders a dynamic geometric pattern using raw SVG and JavaScript, without external libraries. It draws 100 horizontal and 100 vertical rectangles, each masked by concentric circular cutouts created with SVG mask elements. The first mask isolates a central circle, while the second inverts it, producing a crosshatched grid where the bars intersect. The full-viewport composition responds to the browser window size, updating its dimensions on load. The visual effect layers the masked rectangles to create a balanced, woven-like field of lines with a circular void at the center.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 sol lewit full

This example generates a geometric line pattern using D3.js and SVG, rendering a grid of horizontal and vertical rectangles across the full browser window. Two masks, one inverted, create a cross-shaped cutout in the center by selectively hiding or revealing the rectangular bands. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to build the SVG elements, while `mask` elements with paths control the visibility. The design is inspired by Sol LeWitt’s minimalist wall drawings, with the cross motif emerging from the overlapping masked layers.

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

Sol LeWitt with D3-v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 in a React-free HTML page, rendering with SVG. It shows overlapping horizontal and vertical striped rectangles that create a crosshatch pattern, with circular masks revealing a central circular region where the lines intersect. The visualization uses `d3.select`, `d3.range`, and data joins to generate 100 horizontal and 100 vertical `<rect>` elements, each masked by a dedicated `<mask>` with a circle. The first mask exposes a white circle over black background, while the second inverts the effect, producing contrasting visible and hidden areas. The code demonstrates D3’s data-binding and SVG mask primitives without external data sources, relying entirely on procedural generation.

Ddalia.miliauskaite@me.com
85% match
Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com
85% match
Loading thumbnail…

Sol LeWitt with d3

This example uses React and d3 to render a grid of horizontal and vertical rectangles, creating a pattern inspired by Sol LeWitt. The code uses `d3.select` and `d3.range` to generate 48 rectangles per axis, each masked by a circular shape. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to the respective sets, producing a cross-hatching effect inside the circle and a contrasting negative space outside. The rendering targets a full-window SVG.

Mmax-31
85% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing by layering two sets of thin, uniformly spaced rectangles—one horizontal and one vertical—across the full browser window. The rectangles are masked by overlapping circles, creating a bold geometric interplay of lines and negative space. Built with D3 v3 and React, the code uses `d3.range` to generate 100 elements per axis, `svg.append` for the SVG structure, and custom mask definitions (`circle-mask` and `circle-mask-2`) to alternate white and black circular cutouts. The result is a clean, minimalist pattern that responds to the viewport size.

LLewis Ward
84% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical bands that are partially revealed by SVG masks. The D3 code generates 100 rectangular strips in each direction and applies two distinct masks—one inverted, one not—that use D3’s `symbol` shapes to create cutout effects. The visualization relies on `d3.select`, `d3.range`, and SVG mask elements within a React-free, plain HTML setup. The final pattern emerges from the interplay of line density and symbolic transparency across the full viewport.

MMark Christian
84% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt–inspired wall drawing as a series of horizontal SVG bars, each masked by a circular clip path. Built with D3 v7 and React, the code uses `select` to append an SVG and `range` to generate 100 marks with increasing y positions. The bars stretch across the full viewport width, creating a striped pattern that is visually cropped into a circle by the mask reference. The rendering approach relies on SVG mask elements rather than geometric clipping, demonstrating a simple, grid-based generative composition.

SSinasirousnejad
84% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js and SVG. It displays a grid of vertical and horizontal rectangles overlaid with two masks that reveal alternating symbol shapes—including circles, crosses, and diamonds—arranged horizontally across the canvas. The code imports `select`, `range`, `symbols`, and `symbol` from D3 to generate the shapes and masks, rendering 100 rectangles per axis at 20-pixel intervals. The visualization uses the D3 `range` and `join` methods to bind data, with mask rectangles toggling between white and black fills to create the interlocking pattern.

Aabhineetsingh10
83% match