Verical Variant

100%

Verical Variant

✓ Published1🌍 Public

Last edited Jun 14, 2024

Created on Jun 14, 2024

This example creates a full-screen SVG composition of horizontal and vertical bars that intersect to form a circular pattern. The code uses the SVG mask API to apply circular cutouts, with the first mask clipping a dark disk and the second exposing a lighter ring. One hundred horizontal rectangles and one hundred vertical rectangles are generated procedurally via JavaScript, each assigned to one of the two masks. The result is a geometric interplay of stripes and circles, driven purely by SVG shape creation and masking techniques.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG + JS

This example uses JavaScript and the SVG API to construct a full-screen pattern of thin vertical and horizontal rectangles. It defines two SVG groups, each masked by a circle: one group displays vertical lines, the other horizontal lines, with the masks being inverses of each other. The resulting visualization shows a grid of perpendicular lines, with a circular region in the center showing only vertical lines, while the surrounding area displays only horizontal lines. The code programmatically creates SVG elements, including masks and groups, without using any external visualization libraries.

MMarta

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create a circular window onto layered geometric patterns. Using the native SVG DOM API, the code constructs fifty horizontal and fifty vertical rectangles, each with vibrant default colors, and applies two different masks to control their visibility. The first mask, built from a black rectangle and white circle, reveals only the horizontal bars inside the circle, while the second mask, with inverted colors, shows the vertical bars outside the circle’s edge. The result is a clean, mask-driven interplay of striped shapes across the full browser viewport.

Aalexis.delacotte@gmail.com

82% match

Loading thumbnail…

SVG + D3

A full-screen SVG pattern of 100 horizontal and vertical bars alternates in opacity according to two circular masks, revealing a central disc and its inverse. Using D3 v7, the code appends `rect` elements via `selectAll().data().join()`, sizing them by window dimensions. The masks are defined in SVG by combining a background `rect` with a `circle`, where white reveals and black conceals.

MMarta

81% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to create geometric patterns using SVG masks and rectangles. The code generates full-screen vertical and horizontal rectangle grids, with a circular mask that reveals only the overlapping central region. It uses the SVG namespace API (`document.createElementNS`) to construct elements dynamically in vanilla JavaScript, with a mask containing a white circle to define the visible area. The rendering adapts to the browser window dimensions, setting the SVG width and height to match the viewport size.

Ppirani.sabah@gmail.com

80% match

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

80% match

Loading thumbnail…

Different Shapes Using D3

This example demonstrates how SVG masks can create visual variety from simple repeated shapes. Two sets of horizontal and vertical rectangles, each positioned across the full canvas, use complementary circular masks to reveal their pattern. The first mask shows the horizontal bars through a white circle on a black background, while the second inverts this to display vertical bars through a black circle on white. Built with D3 v3 and the `select`, `append`, and `join` APIs, the code generates 100 rectangles per direction, producing a crosshatch effect that is dynamically clipped to form circular windows.

Ssharmamilan632.m@gmail.com

79% 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

79% match

Loading thumbnail…

SVG-Quyt

This example generates a geometric composition of 100 horizontal and 100 vertical bars that form a grid. It uses two circular SVG masks to create a lens effect: the horizontal bars appear only inside a central white circle, while the vertical bars are visible everywhere except that same circle, leaving a circular cutout. The piece is rendered entirely with SVG elements, built using D3’s `select`, `range`, and `join` methods to populate the rectangles.

Ttrongan765@gmail.com

79% match