Geometry

100%

✓ Published2🌍 Public

Last edited Nov 9, 2022

Created on Nov 9, 2022

This example renders a geometric pattern of red vertical and black horizontal bars overlaid on a full-screen SVG. A circular white mask, created with the SVG `mask` element, reveals a clean circular window centered in the viewport, clipping the grid-like arrangement of rectangles. The code builds the visualization entirely with raw JavaScript and SVG APIs, setting attributes like `width`, `height`, `x`, `y`, and `fill` on each `rect`. No external libraries or data sources are used; the composition relies purely on procedural generation and CSS styling for typography.

AI-generated description

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

Similar vizzes

Loading thumbnail…

vertical and horizontal

This example generates a full-screen grid of red vertical and horizontal bars, but uses an SVG `<mask>` to reveal only a circular region at the center of the canvas. A white rectangle inside the mask covers the entire viewport, while a black circle cuts out the visible area, clipping the bars to that shape. The code builds the SVG elements directly with `document.createElementNS` and uses the Google Fonts "Archivo" and "IBM Plex Sans" for styling. The result is a crisp, geometric pattern with a circular window.

Cclara7227

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by rendering a grid of horizontal and vertical bars across the full viewport, with circular masks that reveal or hide portions of the pattern. The visualization uses D3’s `select` and `range` functions to generate 100 rectangles in each direction, applying masks defined via SVG `<mask>` elements with white and black circles. The code constructs the SVG scene programmatically, showing how React-based projects can manipulate vector graphics through D3’s data-join syntax and attribute setters.

EEzhil-Kalai

81% match

Loading thumbnail…

Fork of SAP_SVG_JS_FUNDAMENTALS

This example demonstrates a geometric pattern created entirely with SVG masks, rendering a circular window surrounded by a grid of horizontal and vertical stripes. The visualization uses two custom mask definitions—one with a white circle on a black background and another with a black circle on white—to selectively reveal and hide alternating sets of rectangles drawn across the full viewport. Built with vanilla JavaScript and the SVG DOM API, it dynamically sizes the canvas to the browser window and constructs 100 lines in each direction using `createElementNS` and `setAttribute`, producing a layered, intersecting lattice effect without external libraries.

Ssapan3004

80% match

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

80% match

Loading thumbnail…

Fork of SVG

This example demonstrates a geometric pattern of intersecting horizontal and vertical striped bars, with two circular masks creating a striking contrast. The visualization uses D3.js v7 to generate 100 rectangles for each axis and applies SVG mask elements with circular cutouts. The first mask reveals a white circle within black bars, while the second mask inverts the effect, creating a negative-space circle against the striped background.

Kkyoub1996@gmail.com

80% match

Loading thumbnail…

trying to do it right

This example creates an interactive, full-window SVG composition using raw JavaScript and the React framework. It shows a grid of vertical and horizontal black lines whose visibility is selectively masked by two overlapping circular regions, producing a striking crosshatch pattern with a central circular window. The code constructs SVG elements programmatically, defining two masks—one with a white circle on a black background and another with a black circle on white—to control which lines appear. It leverages the SVG `mask` API and dynamic `rect` generation to achieve the layered effect, with no external data source.

Cclara7227

79% match

Loading thumbnail…

js-visualization

This example renders two sets of overlapping SVG rectangles—horizontal red stripes and alternating green vertical stripes—that are masked by circular cutouts to create a dynamic patterned display. The entire visualization rotates continuously via CSS animation. The code builds the SVG scene imperatively using the DOM API, creating masks, rectangles, and circles with `document.createElementNS`, while styling spins through keyframes defined in CSS.

GGusnaRWX

79% match

Loading thumbnail…

Reproduction

This visualization reproduces a geometric pattern using two overlapping circular masks to control the visibility of horizontal and vertical strips. The rendering relies on core SVG APIs, including `document.createElementNS` for constructing elements and `mask` definitions that hide or reveal rectangular bands across the canvas. One mask exposes a central circular region for the horizontal bars, while the inverse mask reveals vertical bars outside that circle. The result is a clean, intersecting grid pattern, implemented purely with JavaScript and SVG without external libraries.

Aahora

79% match