animate_test

100%

✓ Published0🌍 Public

Last edited Oct 31, 2022

Created on Oct 30, 2022

A single SVG circle bounces vertically in an infinite loop, moving from a center point down and back up over a five-second cycle. The example demonstrates basic SVG animation using the native `animate` element, which specifies the `cy` attribute’s keyframe values, duration, and indeterminate repetition. The scene is rendered entirely with JavaScript-created SVG elements on a blank 960×960 canvas, with no external libraries or data sources involved.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circle animation

Eight red circles traverse a static outline of a larger circle drawn in SVG. The circles move along straight lines, following different diagonal and vertical paths at staggered start times, creating a repeated cycle. The animation uses SVG's `animateMotion` element with an 8-second duration and indefinite repeat. The white background and hard-light blend mode on the enclosing group provide the visual effect. The page is a minimal HTML document with embedded SVG markup.

AArturo Guevara

77% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational SVG graphics with nested circles forming a target-like shape and two animated curved paths. It shows how basic geometric primitives combine to create a visual hierarchy, with the outer circle acting as a frame and inner circles layered by size and fill color. The paths use quadratic Bezier curves and animate their opacity through SVG’s native `<animate>` element, specifying keyTimes and values over a ten-second loop. The code relies on raw SVG markup and a small JavaScript console log, with no external libraries or data binding.

Tthedatacurious

76% match

Loading thumbnail…

bouncy-ball

A lime-green circle bounces vertically inside a fixed 200-by-400 SVG canvas against a black background. The animation loops indefinitely, alternating between a quick downward fall and an upward rebound. Built with D3 v4, the bounce uses chained `transition()` calls with `ease(d3.easeQuadIn)` for the fall and `ease(d3.easeQuadOut)` for the rise, repositioning the circle's `cy` attribute between 0 and 260 pixels. A recursive `on('end', bounce)` callback restarts the cycle.

PPhilippe Rivière

75% match

Loading thumbnail…

SVG Fundamentals

A demonstration of SVG fundamentals shows a full-screen radial gradient and an animated circle descending vertically over five seconds. The gradient transitions from aliceblue to indigo via an SVG `<animate>` element on the `<stop>` color, while the circle’s `cy` attribute animates from 250px to 350px. Rendered purely as inline SVG in an HTML document, the example uses no external libraries, relying on native SVG markup and SMIL animation for its visual effect.

HHtet Yan Oo

75% match

Loading thumbnail…

animate circle

This example shows a single circle positioned inside an SVG container. The circle is placed at coordinates (100, 100) with a radius of 20 and a fill referencing a gradient defined as `#land1-gradient`. The page relies on plain HTML structure without any JavaScript logic or CSS styling rules in the provided files. It demonstrates the minimal setup for rendering static SVG shapes in a web page, using the SVG `<circle>` element and the `fill` attribute with a gradient reference.

Ggyan9427

74% match

Loading thumbnail…

Untitled

A tiny SVG viewport shows 1,000 randomly placed circles bouncing and wrapping around its edges, with a live frames-per-second counter in the corner. The animation runs through `d3.timer`, updating each circle’s `cx` and `cy` attributes based on randomized velocity values. All rendering uses SVG elements and D3’s data join, with positions recalculated on every tick to keep the motion continuous.

KKanishk Mamgain

74% match

Loading thumbnail…

D3 Sketch Test

This example demonstrates the simplest form of animation in D3: a single white circle moving horizontally back and forth across a 960x480 SVG canvas. The circle transitions from x-coordinate 40 to 900 and back, with each leg lasting 3000 milliseconds. The code uses `d3.select`, `append`, `attr`, and chained `transition` calls with `duration`, where the `on("end")` event listener handles looping. It renders via SVG within a React application, though the animation itself operates independently of React’s rendering cycle.

NNita

74% match

Loading thumbnail…

Basic Shapes in SVG

A black-and-white animation of concentric circles expands and contracts around a central point, with the radius cycling through increasing values. The SVG is manipulated entirely through basic JavaScript, creating and appending circle elements in a loop of alternating colors. The animation uses `setInterval` to update the state every millisecond, while `document.createElementNS` and `setAttributeNS` build each circle with the SVG namespace. The code defines a custom `computeState` function to progress the radius and delta, with the loop resetting when the radius exceeds 400.

Tthenlpstudent

73% match