Skip to main content
SimilarExport ZIP
100%

Svg Fun

✓ Published1🌍 Public
Ddanperkins
Last edited Jan 8, 2023
Created on Jan 7, 2023
Forked from HTML Starter

This example generates an abstract animation using SVG masks and morphing symbols. It displays a grid of rectangular bars that appears to slice through the canvas, with the pattern dynamically changing as the mask content transitions between geometric shapes. The visualization employs d3 selections and transitions to animate the masks sliding in and out over a nine-second duration, while the underlying data cycles through d3 symbols. React manages the rendering, and the SVG elements use inline animation and CSS styling to create the visual effect.

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

SVG

This example demonstrates a visual effect where a grid of horizontal and vertical strips is masked to reveal a circle. The rendering uses SVG masks with complementary black and white rectangles and circles. The code constructs the grid using D3.js `select` and `range` functions to generate 100 strips in each direction, with the masks applied to clip the strips into the circular shape against a plain background.

Kkyoub1996@gmail.com
83% match
Loading thumbnail…

Animate rotations

The visualization animates rotating geometric shapes (from `d3.symbols`) that slide across the screen, acting as masks to selectively reveal or hide vertical and horizontal stripes. Two overlapping mask layers, one inverse, alternate shapes every five seconds with a two-second slide transition. Built with React and D3, it uses `d3.select`, `d3.transition`, and SVG `<mask>` elements to animate the shape paths and dynamically update the stripe rectangles. The result is an endlessly changing, layered pattern of stripes and symbols.

Ddanperkins
83% match
Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

SSidney Oluoch
82% match
Loading thumbnail…

Fun-animation

This example shows a screen-filling SVG animation of thin vertical lines that pulse outward into thicker bars over time. A circular mask reveals the animation at the center, with the mask radius itself expanding and contracting rhythmically. The code generates lines with a gradient color scheme based on their horizontal position, skipping every third line, and animates a subset of lines using SVG’s native `<animate>` element. The visualization uses raw JavaScript and the SVG DOM API, with no external libraries.

GGabriel Ing
82% 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
82% match