Skip to main content
SimilarExport ZIP
100%

vertical and horizontal

✓ Published0🌍 Public
Cclara7227
Last edited Nov 9, 2022
Created on Nov 9, 2022
Forked from Geometry

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Geometry

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.

Cclara7227
85% 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
82% match
Loading thumbnail…

design done

A grid of alternating horizontal and vertical striped rectangles covers the full screen, with a circular mask revealing an intersection of both orientations. The visualization uses raw SVG elements created via the DOM API, applying `mask` and `circle` elements to clip each stripe. A white circle in the first mask hides the horizontal bands except within its bounds, while the second mask uses a black circle on a white background to invert the effect for the vertical strips, producing a crisp radial pattern at the center.

AAkshay
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.

AAditya Joshi
81% match
Loading thumbnail…

Fork of SVG Fundamentals Horizontal

This example demonstrates SVG masking by confining a pattern of horizontal and vertical lines to a circular region at the center of the screen. The code generates 100 horizontal strips and 100 vertical strips using the `document.createElementNS` API, while a mask containing a white circle over a black rectangle restricts visibility of the horizontal lines. The result is a grid where only the intersection inside the circle remains visible, created entirely with vanilla JavaScript and no external libraries.

SSidney Oluoch
81% 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
80% match
Loading thumbnail…

Fork of Fork of SVG Fundamentals Horizontal Vertical

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

SSidney Oluoch
80% match
Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Mmax-31
80% match