rect-to-circle

100%

rect-to-circle

✓ Published0🌍 Public

Last edited Dec 1, 2016

Created on Dec 1, 2016

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.

AI-generated description

Transforming a circle into a rect.

Transitioning the rx and ry properties of a rect is easier than this, but something the flexibility of path element is worth the hassle.

Similar vizzes

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

76% match

Loading thumbnail…

Create an animated rectangle with D3

This example demonstrates how D3 transitions can animate the properties of an SVG rectangle. An initially short, 100-pixel-wide rectangle grows in height from zero to 400 pixels over two seconds after a one-second delay, while its fill color changes from steelblue to a warm orange in a second transition. The code uses D3 v5’s `d3.select` to append an SVG element, `selection.append('rect')` to create the shape, and chained `transition()` calls with `.delay()` and `.duration()` methods. The rectangle is rendered directly in the browser via SVG, with all styling and timing defined imperatively in JavaScript.

NNita

76% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes and CSS styling, showing a green rectangle with a thick black outline and a blue path. The code uses raw SVG elements within an HTML page, including `circle`, `path`, and `rect`, and applies CSS transitions and `:hover` pseudo-classes to animate changes in stroke color, width, and path data. The rectangle transitions from green to red over eight seconds on hover, while the path’s stroke shifts to red and its `d` attribute morphs over two seconds, illustrating basic vector graphic interactivity and styling.

Aavia62490

75% match

Loading thumbnail…

SVG Animations using CSS transitions

A single red rectangle with a black border sits centered in an SVG canvas. The example demonstrates CSS transitions applied directly to SVG elements, specifically the `rect` element. When hovered, the shape smoothly animates its `fill` from red to green and its `stroke-width` from 20 to 100 pixels over a 3000ms duration. The code uses plain CSS within a `<style>` block, targeting the SVG element’s `transition` property, with no JavaScript or external libraries involved. The rendering is pure SVG markup contained in an HTML file.

GGyeongmin Kim

75% match

Loading thumbnail…

SVG Transition rectangle

This example shows how CSS transitions can animate SVG shapes when a user hovers over them. A red rectangle changes its fill color to blue, increases its stroke width, and shifts its stroke color to grey over 3 seconds, while a circle fades to light green and scales up over 2 seconds. A second yellow rectangle remains static, illustrating contrast. The code uses plain HTML, CSS, and JavaScript with inline SVG, leveraging CSS `transition` and `:hover` pseudo-classes. No JavaScript libraries are used; the rendering relies on the browser’s native SVG support.

Gguththered

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

74% match

Loading thumbnail…

Simple transition chaining in v4

A circle begins on the left side of an SVG canvas and performs three sequential transitions: it moves horizontally to the right over four seconds, then doubles its radius over another four seconds, and finally changes its fill color from blue to red. The example demonstrates the chaining of transitions in d3.js v4, where each call to `transition()` queues the next animation stage after the previous one completes. The scene renders as animated SVG, using the `d3.select`, `append`, and `attr`/`style` methods to construct and modify the circle element, with transition durations set in milliseconds.

Dd3noob

74% match

Loading thumbnail…

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

JJn1532

74% match