Skip to main content
SimilarExport ZIP
100%

Fork of reproduction of somethind 4th cell

✓ Published2🌍 Public
IIgorGorin00
Last edited Apr 3, 2023
Created on Apr 3, 2023

This example displays a geometric composition of triangular polygons and a central symbol, created using D3.js APIs such as `symbol`, `select`, and `attr`. The visualization renders SVG polygons against a masked region, where a rotated path shape defines the visible area. The mask includes a white rectangle and a black symbol, which is also overlaid directly on the canvas. The code generates data procedurally based on window dimensions, demonstrating a generative art approach within a React framework using the D3 library version 7.8.4.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

reproduction of somethind 5th cell

This visualization generates a geometric composition using D3.js SVG rendering. Black triangles fan outward from a central white rotated square symbol, created by masking a black rectangle with a diamond-shaped cutout using `d3.symbol` and `d3.mask`. The triangles are computed programmatically via `linspace` and polygon points, forming symmetric radial patterns around the center. The result is a stark, mask-based interplay of light and dark shapes.

IIgorGorin00
85% match
Loading thumbnail…

reproduction of something #4

This example builds an abstract geometric composition from overlapping polygon layers created with D3.js and rendered as SVG. Two sets of polygons are generated programmatically using data arrays for coordinates and color palettes, then appended to a single SVG container. The visualization integrates D3’s `range` for iteration, `symbol` for diamond outlines, and `select` for DOM manipulation. It displays a central square bisected by diagonal lines, surrounded by nested, rotated shapes in a warm terracotta-to-dark color scheme, all laid out responsively based on the viewport’s smaller dimension.

IIgorGorin00
84% match
Loading thumbnail…

reproduction of somethind

This visualization reproduces a geometric pattern composed of triangular polygons arranged in two overlapping fan-like sets. The polygons radiate from the top-right corner across the full width and height of the viewport, creating a layered lattice of intersecting shapes outlined in black. The rendering uses React with D3’s `select` and `join` methods to bind array data to SVG `polygon` elements, where each polygon’s points are generated programmatically by the `getData1` function using viewport dimensions. The example demonstrates a pure SVG approach with no external data sources, relying solely on computed coordinates.

IIgorGorin00
83% match
Loading thumbnail…

reproduction of somethind 2nd cell

This example generates a geometric composition of triangles that fill the browser window. Polygons are drawn in two distinct groups, radiating from the top corners downward to create an abstract, layered pattern. The visualization is built with React and rendered as SVG, using D3.js functions such as `select` and `join` to append polygons dynamically. The polygon coordinates are computed procedurally based on the window dimensions, dividing the width and height into incremental steps.

IIgorGorin00
82% match
Loading thumbnail…

reproduction of something

This visualization reproduces an abstract geometric composition across a three-by-three grid. Each of the four populated cells displays a distinct arrangement of filled and outlined polygons, creating triangular patterns that vary in orientation and density. The code generates these shapes procedurally using JavaScript and the D3 library, computing polygon coordinates through loops and rendering them as SVG elements with the `selectAll` and `join` methods. The grid layout and styling are defined in CSS, with the react framework managing the overall structure.

IIgorGorin00
82% match
Loading thumbnail…

Fork of D3 beginning

This example displays an abstract geometric pattern of thin horizontal and vertical lines across the full browser viewport. The lines are selectively revealed or hidden through two SVG masks, each populated with D3 symbols (such as circles and crosses) arranged in a row. Using D3’s selection join, the code creates 100 rectangles per axis and applies the masks via `svg.call`. The rendering is done entirely with SVG elements in React, leveraging d3’s `symbol` and `range` APIs.

AAleOG
81% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Ccardoza-IPH
81% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js within a React framework, rendered as an SVG. It displays a grid of horizontal and vertical rectangular stripes that are partially revealed through two circular masks, creating a crosshatched pattern with a central circular void. The code leverages D3's `select`, `range`, and `.join()` API to generate the stripes, while SVG mask elements define the visibility zones. The visualization dynamically sizes to the browser window, demonstrating a blend of generative art and data-driven DOM manipulation.

MMark Christian
81% match