Page ROller

100%

✓ Published1🌍 Public

Last edited Sep 27, 2022

Created on Sep 27, 2022

This example shows a looping CSS animation of four rotating lines that form a rolling square shape. The animation uses custom keyframes named `desno`, `desno2`, and `desno3` to rotate each line sequentially around different origins, with staggered opacity changes creating the illusion of a continuous page-turning effect. The code relies on CSS transforms, animation properties, and positioning, with the lines styled as rounded rectangles in a yellow-green palette on a green background. While the HTML includes an SVG element and D3.js, the visual effect is driven entirely by CSS.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Animate

This example shows a single yellow rectangle centered on a gray SVG canvas, dynamically resizing and skewing through a looping animation against a pink page background. The rectangle’s fill, stroke, and dimensions transition smoothly via CSS transitions, while a keyframe animation named `grow` drives its scale and skew transformations. The code uses plain HTML, CSS, and JavaScript, with the SVG rendered directly in the markup and styled through embedded styles.

AAlim Bolar

73% match

Loading thumbnail…

Border Animation

This example demonstrates a dynamic, organic border using CSS animations. A white, irregularly-shaped blob continuously morphs through different border-radius configurations, including a perfect circle at the midpoint, before shifting to a yellow hue. The animation is driven by the `borderrr` keyframes within the stylesheet. The page uses a minimal HTML structure with an SVG element and a `bundle.js` script, though the primary visual effect is achieved through pure CSS, not JavaScript or D3. The code references D3 v5 via CDN but the actual animation relies on CSS `@keyframes` and the `border-radius` property.

AAndrew-Kiwa

73% match

Loading thumbnail…

TD_SVG FUndamentals

This example demonstrates fundamental SVG shapes and animation within a single static HTML page. A green rectangle acts as the background and spins via an `animateTransform` rotation while its corner radius animates through an `animate` element. Overlaid on this are a blue line and three concentric circles in red, yellow, and green. The rendering uses raw SVG markup within `index.html`, with animation driven by native SVG animation elements rather than external libraries.

TTatjana Dzambazova

72% match

Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel

72% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within an HTML page, showcasing interactive hover effects that animate color changes over time. It includes a blue rectangle, a red circle, and a white vertical line, all defined directly in the markup. CSS transitions handle the smooth color shifts, such as the rectangle turning purple and the circle turning white on hover. The SVG canvas scales to full width with a fixed height, and the page uses embedded JavaScript and CSS within a minimal HTML structure, highlighting a straightforward approach to creating responsive, animated vector graphics.

Hhelloelectro

70% match

Loading thumbnail…

Square Circle Spiral Illusion

Six concentric rings of small squares rotate at different speeds via SVG transforms, creating a spiral-like square illusion against a gray background. Alternate squares are stroked white for contrast. The animation uses `d3.timer` and `d3.selectAll` with `attr("transform")` to update rotation based on elapsed time, while each ring’s squares are generated from `d3.range` and positioned with `translate` and `rotate`. The code runs on D3 v3 and relies on SVG `rect` elements.

Mmbostock

70% match

Loading thumbnail…

Intro to CSS Animations

This example demonstrates the flexibility of CSS animations and transitions for creating simple motion and interactive effects in web graphics. A static SVG hexagon is embedded as a base64 data URI, and its styling responds to user interaction—hovering causes the shape to scale up and rotate 45 degrees with a smooth two-tenths-second transition. The CSS also defines a slide keyframe animation that translates an element horizontally, though the active circles using this effect are commented out in the code. The example uses core CSS features including `@keyframes`, `transform` properties, and transition timing.

JJn1532

70% match

Loading thumbnail…

Rota2

A black circular canvas contains eight white lines radiating from the center, dividing the circle into sixteen equal sectors. A single rotating group, animated with SVG `<animateTransform>`, spins one set of eight white dots around the center while counter-rotating on its own axis. The dots trace paths determined by the combination of these two rotations, creating a dynamic, hypnotic pattern. The entire composition is rendered in static SVG with inline animation declarations.

AArturo Guevara

70% match