Skip to main content
SimilarExport ZIP
100%

SVG + JS

✓ Published1🌍 Public
MMarta
Last edited Sep 26, 2024
Created on Sep 26, 2024
Forked from SVG Fundamentals

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.

AI-generated description

Trying to learn how this thing works.

MIT Licensed

Similar vizzes

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
87% 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
84% match
Loading thumbnail…

SVG and Javascript

This example demonstrates how SVG masks can dynamically composite shapes to create an intricate visual pattern. Two circular masks—one black and one white—are layered with alternating sets of thin rectangular stripes, generating a crosshatched grid that reveals or hides sections of the canvas. The code uses raw JavaScript DOM manipulation with `document.createElementNS` to build SVG elements dynamically, computing positions based on `window.innerWidth` and `window.innerHeight`. No external libraries are employed; the rendering relies entirely on native SVG mask and rectangle elements.

GGiacomo Rossoni
84% match
Loading thumbnail…

SVG Fundamental

This example creates a full-screen SVG image built entirely from programmatically generated rectangles. It demonstrates two different mask patterns that reveal a central circular area, with one mask applied to horizontal bars and another to vertical bars. The code uses D3.js version 6.6.1, specifically the `selection` module, alongside vanilla JavaScript DOM manipulation with `document.createElementNS` and SVG attributes. The rendering approach shows raw SVG element creation without using D3's data join or helper functions.

PPhilip W
83% match
Loading thumbnail…

JS Example

A JavaScript-generated SVG visualization displays a series of vertical blue rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full window height. A circular mask, centered on the screen with a radius of 200 pixels, reveals only the bars within its boundary, creating a striking circular cutout effect against the otherwise full-height stripes. The code builds the SVG dynamically using the DOM API, creating elements via `createElementNS` and appending them to the body with attributes set programmatically.

Nnubhatia
83% match
Loading thumbnail…

sol vanilla JS

This example uses SVG and JavaScript to create a circular viewport that reveals a grid of horizontal and vertical lines. The visualization dynamically builds SVG elements, using masks to carve a circular hole in the background and to clip the vertical stripes inside the circle. The code creates a mask for the horizontal lines, which span the entire window width, and a second mask for the vertical lines, which fill the circle’s height. The result is an optical illusion of intersecting lines, produced entirely with procedural DOM manipulation and CSS styling.

KKerim
82% match
Loading thumbnail…

JS practice

This example demonstrates how SVG masks can combine two complementary cutout patterns. It renders a full-screen SVG canvas where a grid of vertical and horizontal rectangles is layered, with each set masked by a distinct circular hole centered in the viewport. The code uses the raw SVG DOM API via `document.createElementNS` to build masks, rectangles, and the masking circles, setting attributes like `mask` and `fill` directly. No JavaScript libraries are used; the result is a visible intersection of the two mask shapes across the rectangle layers.

CCameron Wehr
82% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by drawing two sets of perpendicular parallel lines—horizontal bars from top to bottom and vertical bars from left to right—that intersect to form a grid. Two circular masks are applied to reveal or hide overlapping regions, creating a crossfade effect between the two line groups. The visualization uses D3’s `select`, `range`, and data join methods to generate the SVG elements, and defines two `<mask>` elements with black and white rectangles and circles to control visibility. The rendering relies entirely on SVG attributes like `width`, `height`, and `mask`, with no animation or interaction.

Ssugeelan@hotmail.com
82% match