Animate rotations

100%

Animate rotations

✓ Published1🌍 Public

Last edited Jan 9, 2023

Created on Jan 8, 2023

Forked from Svg Fun

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Svg Fun

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.

Ddanperkins

83% match

Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

GGusnaRWX

82% match

Loading thumbnail…

D3_Sol

This example overlays two sets of alternating horizontal and vertical stripes, each masked by a pattern of D3 symbols (such as circles, crosses, and diamonds) centered on the canvas. The first mask uses solid shapes on a white background, while the second inverts the fill, creating a contrasting lattice. Built with React and D3 v7, it uses `select`, `range`, `symbols`, and `symbol` to generate SVG elements, with `mask` applied to each stripe group to reveal the symbol shapes through the grid.

PPolydexter

81% match

Loading thumbnail…

d3-get-it-right-04

This example uses React with D3 v6 to generate an SVG visualization of intersecting horizontal and vertical stripes. The code creates 100 rectangular bands in each direction, then applies two SVG masks: a diamond-shaped mask formed with a `d3.symbol` path, and a circular mask created with a basic SVG circle. The masks reveal the underlying stripes in geometric patterns, demonstrating how D3's `select`, `range`, and `join` methods can construct layered SVG elements with custom clipping. The visualization dynamically fills the browser window using `window.innerWidth` and `window.innerHeight`.

Tthymdi

79% match

Loading thumbnail…

Untitled

This example renders horizontal and vertical alternating stripes masked by two circles in the center of an SVG canvas. The code uses raw SVG manipulation via `document.createElementNS` to construct masks, rectangles, and elements, with `d3` available as a dependency but not actively used. The first mask reveals horizontal stripes, while the second mask inverts the circle to show vertical stripes outside it, creating a crosshatched visual pattern that fills the viewport. The visualization demonstrates layered SVG masking techniques without data input.

DDuckGorilla

79% match

Loading thumbnail…

d3d3d3 2

Two layered grids of thin rectangles sweep across the full screen, one horizontal and one vertical, creating a moiré-like interference pattern. Each grid is partially hidden by an SVG mask that reveals the shape of a large symbol—a star from the d3 symbol set—at the center. The code builds the visualization with D3 selections, joining data arrays to create 100 rects per grid, and defines reusable mask-rendering functions via `svg.call`. Rendering uses SVG elements within a React framework, with masks composed of a full-screen rect and a symbol path.

GGusnaRWX

79% match

Loading thumbnail…

js-visualization

This example renders two sets of overlapping SVG rectangles—horizontal red stripes and alternating green vertical stripes—that are masked by circular cutouts to create a dynamic patterned display. The entire visualization rotates continuously via CSS animation. The code builds the SVG scene imperatively using the DOM API, creating masks, rectangles, and circles with `document.createElementNS`, while styling spins through keyframes defined in CSS.

GGusnaRWX

79% match

Loading thumbnail…

Different Shape Reproduction with D3

Different Shape Reproduction with D3 demonstrates how SVG masks can be combined to create complex visual compositions. The visualization layers horizontal and vertical striped rectangles, each masked by a distinct pattern of D3 symbols. Using d3.select, d3.range, d3.symbol, and d3.symbols, the code generates 100 repeating bars in both directions, with a mask revealing symbol shapes in inverted and non-inverted forms. The React-framework example renders entirely in SVG, with masks applied via the renderMask function to produce the final overlapping effect.

Aahora

79% match