Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published0🌍 Public
JJignesh Mistry
Last edited Apr 26, 2023
Created on Apr 25, 2023
Forked from HTML Starter

This example demonstrates the fundamentals of SVG masks and animation by creating a dynamic geometric composition. The code generates 50 horizontal black rectangles with a circular mask, layered over 50 vertical color-scaled rectangles with a second mask, producing an intersecting grid pattern. A JavaScript `animate` element continuously adjusts the height of the colored rectangles from half the screen height to full height over a 2-second cycle. The visualization uses raw SVG element creation via `document.createElementNS` and a hardcoded 10-color palette, with masks defined as circle and rect shapes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates the visual impact of SVG masks, using them to selectively reveal or hide overlapping shapes. It creates a full-screen canvas filled with horizontal and vertical stripes by generating one hundred thin rectangles for each direction. A circular mask isolates a central area where the stripes remain visible, while a second, inverted mask produces a contrasting ring effect by revealing the vertical stripes outside the circle. The code builds the SVG document dynamically through the Document Object Model, creating elements like rectangles and masks using `createElementNS` and `setAttribute` within JavaScript.

MMichael Bell
89% 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
87% 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
86% match
Loading thumbnail…

SVG Fundamentals

An SVG-based visualization demonstrates how masking layers create intersecting geometric patterns. The code renders 100 horizontal and vertical rectangles using D3's `select` and `range`, each masked by a circular region. Two SVG masks invert their black-and-white fills, producing a visible cross-shaped overlap at the center where the circles align. The grid lines only appear within the masked circular areas, creating a dynamic interplay of light and dark stripes against a blank canvas.

GGeorgi Dimitrov
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

SSubhendu Karmakar
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

SSubhendu Karmakar
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create striking visual effects, showing a series of horizontal rectangles that are visible only through a circular cutout in the center of the screen. The code uses d3.select to append an SVG element sized to the window, then binds an array of data points to create the rectangles with varying vertical positions. A dedicated mask element, constructed from a black background rect and a white circle, controls the visibility of these rectangles, revealing them only within the circular region. The rendering approach relies entirely on SVG primitives and the D3 join pattern.

PPrasad Sudrik
86% 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
85% match