JavaScript SVG Animation

100%

JavaScript SVG Animation

✓ Published0🌍 Public

Last edited Jun 28, 2021

Created on Jun 28, 2021

A rotating square animates over a static Cartesian coordinate system, with two small circles tracking its corners along a circular path. Built with vanilla JavaScript and SVG, the animation uses `requestAnimationFrame` to update the square's `transform` attribute and calculate circle positions via trigonometric functions. The code directly manipulates SVG elements like `<rect>` and `<circle>` without any external libraries, rendering entirely in the browser.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Rotating rect

A small square rotates around a circular path within an SVG canvas, moving at a constant speed. The rotation is driven by a JavaScript loop that updates the rectangle's transform at regular intervals. The code uses the SVG `createSVGTransform` API and `setTranslate` to reposition the element, with `setTimeout` scheduling 100 incremental steps along the circle. The result is a simple, self-contained animation rendered in SVG, with no external libraries beyond plain JavaScript.

AAbdoulaye DIOP

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

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

77% match

Loading thumbnail…

SVG Fundamental - Sol Lewitt

This example generates an abstract, animated composition inspired by Sol LeWitt, built entirely with raw SVG and JavaScript. It creates two circular masks, each containing a circle whose radius animates over 15 seconds, and applies them to groups of rectangles that rotate continuously. The code uses the SVG `circle`, `rect`, `mask`, `animate`, and `animateTransform` elements to cycle colors between black and white and rotate the shapes 360 degrees. No external libraries are used; the visualization directly manipulates the DOM via `document.createElementNS` to construct the scene dynamically.

BBart van Pelt

77% match

Loading thumbnail…

SVG ANIMATIONS

A single red square with a black outline sits centered on a 960 by 500 SVG canvas. CSS transitions animate both the fill color and stroke width over three seconds when the rectangle is hovered, turning it green and expanding its border. The example uses SVG markup with embedded CSS styling and the `:hover` pseudo-class, with no external JavaScript libraries.

Rroyal8466

76% match

Loading thumbnail…

SVG Fundamentals SIN CIRCLE

This example shows a field of circles that continuously shift position and size based on a sine wave, animating at 60 frames per second. The code generates data points using JavaScript’s `Math.sin` to compute both the circle radius and its x-coordinate offset, creating a rhythmic, flowing motion. It uses D3 v6’s `select`, `data`, and `join` methods to bind the updated data to SVG `<circle>` elements, updating their `r`, `cx`, and `cy` attributes each frame. The rendering is pure SVG within a full-viewport canvas, with no external data source.

AAitorGD

76% match

Loading thumbnail…

SVG Fundamental

This example showcases fundamental SVG shapes and animations within a React-rendered HTML page. It displays circles, lines, paths, and polygons with gradients, CSS hover transitions, and inline SMIL animations like `animateTransform` for rotation. The code uses plain SVG elements with CSS styling, demonstrating interactive effects such as color and stroke changes on hover.

AAdithya Krishna

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

76% match