svg experiments

100%

svg experiments

✓ Published0🌍 Public

Last edited Sep 29, 2021

Created on Sep 29, 2021

This example demonstrates how an SVG mask can selectively reveal or hide parts of a shape, using a path as the mask. A single green circle is rendered, partially obscured by a jagged mask path defined in SVG’s `<defs>` and applied via the `mask` attribute. The code uses raw SVG elements, including `circle`, `path`, and `mask`, with styling provided by inline CSS. The mask’s fill color (`#555`) controls the transparency region, showcasing a basic technique for clipping or layering vector graphics without external libraries.

AI-generated description

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

Similar vizzes

Loading thumbnail…

SVG Masks

This example shows how SVG masks can punch a heart-shaped hole through a solid red circle, leaving the surrounding area visible. A `<mask>` element defines the cutout using a black rectangle for invisible regions and a white path for the visible heart shape. The mask is applied to a `<circle>` via the `mask` attribute, with the heart path drawn using an SVG arc and quadratic Bézier commands. The page is plain HTML with inline CSS and JavaScript, requiring no external libraries.

Jjhrdt

82% match

Loading thumbnail…

mask experiments

This example demonstrates the interplay of two complementary SVG masks. It first shows a set of horizontal stripes visible only within a circular window, then displays vertical stripes that are hidden inside the circle while remaining visible outside it. The piece creates a stark geometric contrast between the two masked regions. The visualization is generated entirely with the SVG `mask` element and basic `rect` and `circle` primitives, using white and black fills to define luminosity. The code dynamically constructs one hundred stripes for each orientation, with the masks applied via URL references to `#circle-mask` and `#circle-mask-2`.

Sscheenmi@gmail.com

81% match

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

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

80% match

Loading thumbnail…

svg mask

This example demonstrates the visual effect of SVG masks by layering horizontal and vertical stripes over a full-viewport canvas. It creates two circular masks, one with a white circle on a black background and the other with a black circle on a white background, then applies them to alternating sets of 50 thin rectangles. The code builds the entire scene programmatically using the Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, without any external libraries, and renders everything directly in SVG.

Sserebryanaya.n@gmail.com

79% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG masking by layering a grid of horizontal and vertical rectangles over a circular cutout. The rectangles are created dynamically using the DOM API `document.createElementNS` with the SVG namespace. Two complementary masks, `circle-mask` and `circle-mask-2`, alternate between white and black fills to control visibility, producing a striped pattern inside the circle while keeping the surrounding area solid. The code relies on raw SVG manipulation rather than a visualization library, with only the `d3-selection` API imported but not actively used.

AAitorGD

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

79% match

Loading thumbnail…

SVG Fundamentals

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.

JJignesh Mistry

79% match