Skip to main content
SimilarExport ZIP
100%

soli d3 experiments

✓ Published1🌍 Public
Rrwata97
Last edited Apr 20, 2023
Created on Apr 19, 2023
Forked from HTML Starter

This example generates layered, striped patterns by arranging arrays of rectangular elements across the screen. It uses d3 selection and data joins to create four groups of rectangles, each rotated and translated with SVG transform attributes to form overlapping geometric compositions. The code leverages clip paths (via `clipPath` and `rect`), masks, and z-index styling to control visibility and layering, with CSS classes assigned to each group. All rendering occurs in an SVG element sized to the full browser window, using d3 v6 within a React project.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

soli d3 experiments refactor

This example uses D3 v6 to render a full-screen SVG with 100 horizontal rectangles stacked vertically. A single white 150×150 pixel mask is applied via the `mask` API, revealing only the section of the striped pattern that overlaps the mask’s area. The code builds the visualization by appending a `<mask>` element, adding a white rectangle to it, and then joining data from `range(n)` to create the stripes. The CSS classes `.first` and `.second` are defined but unused, and the commented-out code suggests previous experiments with clip paths.

Rrwata97
88% match
Loading thumbnail…

Sol LeWitt

This example generates three full-screen SVG compositions of overlapping horizontal and vertical striped rectangles, each masked into a distinct geometric shape: a circle, a triangle, and a rectangle. Using D3 v7, it constructs 100 thin bars per axis and applies SVG masks to reveal only the portions inside each shape. The code combines D3’s selection and join methods with custom mask definitions and symbol paths, such as `d3.symbolTriangle`, to render the layered patterns in the browser.

Aadonisacruz0@gmail.com
83% 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
83% 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
83% 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
83% match
Loading thumbnail…

D3_Sol

This example overlays two sets of alternating horizontal and vertical stripes, each masked by a pattern of D3 symbols (such as circles, crosses, and diamonds) centered on the canvas. The first mask uses solid shapes on a white background, while the second inverts the fill, creating a contrasting lattice. Built with React and D3 v7, it uses `select`, `range`, `symbols`, and `symbol` to generate SVG elements, with `mask` applied to each stripe group to reveal the symbol shapes through the grid.

PPolydexter
82% match
Loading thumbnail…

sol wit production with d3

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.

AAkshay
82% match
Loading thumbnail…

Ep3 using d3 and Sol Lewitt diff share

This example uses D3.js in a React framework to generate an abstract geometric composition inspired by Sol LeWitt. It renders 100 horizontal and vertical rectangles as SVG elements, layered with two masking shapes—a star and a plus symbol—to create intersecting patterns. The code leverages D3 selections, `range()`, and `symbol()` to generate the shapes, while SVG masks control which parts of the grid remain visible. The visualization adapts to the full browser window and demonstrates a modular approach to procedural art.

Rrashmi.s2055@gmail.com
82% match