Rotating rect

100%

✓ Published0🌍 Public

Last edited May 5, 2021

Created on May 5, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

JavaScript SVG Animation

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.

MMTR

83% match

Loading thumbnail…

SVG Animation using CSS Transition

A single red rectangle with a black border animates smoothly when hovered, transitioning its fill color to green and expanding its stroke width over three seconds. This simple example demonstrates SVG animation achieved through CSS transitions, applied directly to the `rect` element using the `transition: all 3000ms` property. The page is a bare HTML document with embedded CSS and JavaScript, showcasing how CSS can drive SVG property changes without explicit JavaScript animation logic. The HTML includes a minimal SVG canvas of 960 by 500 pixels, with the rectangle's styling and hover state defined entirely in the stylesheet.

Ddaigou65

72% match

Loading thumbnail…

Rectangles

This example centers a single green rectangle on a gray SVG canvas, sized to half the viewport’s width and height. A pink page background and red SVG border frame the composition. The code uses vanilla JavaScript to query the SVG element via `document.querySelector`, reads its `clientWidth` and `clientHeight`, then sets the rectangle’s `x`, `y`, `width`, and `height` attributes dynamically. CSS styles the body and a `.center` class, while the rectangle receives its fill, yellow stroke, and stroke width through `setAttribute` calls.

AAlim Bolar

72% match

Loading thumbnail…

SVG Animations Using CSS transitions

A single red rectangle with a thick black stroke animates smoothly when hovered. The example uses CSS transitions on the `rect` element, defining a 1000ms transition for all properties. On hover, the fill changes to lightblue and the stroke width increases from 20px to 50px. This demonstrates how SVG elements can leverage standard CSS for declarative animation, with the rectangle placed at (250, 100) within a 960 by 500 viewport.

RRyanYun0017

72% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—circle, line, path, and rect—statically rendered within a 500 by 500 canvas. It highlights CSS integration, including a `transition` rule for rectangles that animates over 3000 milliseconds, though the hover state’s `fill` uses quoted strings, which are non-standard CSS values. The markup uses core SVG attributes directly, such as `stroke-width`, `fill`, and `d` for paths, with no external libraries.

LLawrence Card

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

71% match

Loading thumbnail…

rect-to-circle

This example demonstrates an animated transition between a circle and a rectangle using a single SVG path element. The code uses D3 v4 to interpolate the path data, morphing the shape's geometry rather than simply adjusting rx and ry properties. By leveraging the flexibility of the path element, the transition maintains smooth, continuous curves throughout the animation. The author notes that while transitioning rect properties is simpler, using paths offers greater control, and the visualization highlights this trade-off. The animation loops, showing the circle expanding into a rectangle and back, with the path's control points recalculated to preserve a visually pleasing shape.

11wheel

71% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, and lines, arranged on a 960 by 500 canvas. It shows how basic attributes like position, radius, fill color, stroke, and stroke-width control the appearance of each element, with a blue outer rectangle framing the composition. The code uses plain SVG markup within an HTML page, relying on CSS and JavaScript as listed in the accompanying README. A red diagonal line and a yellow rectangle with a thick navy border illustrate varying styling options.

Aaasiasattar

71% match