Skip to main content
100%

testing

✓ Published0🌍 Public
UUtopiah
Last edited Apr 15, 2016
Created on Apr 15, 2016

A red rectangle fades to blue over three seconds, demonstrating a basic SVG transition. The visualization uses D3.js version 3.5.5 to select the body element and append an SVG canvas, then applies a `transition().duration(3000).ease("bounce")` to animate the rectangle’s fill style. The code is minimal, with no data source or interaction, and relies on the blockbuilder.org template. The animation shows a single shape changing color, highlighting D3’s ability to animate SVG attributes with custom easing functions.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

fresh block

A large red rectangle transitions to blue over three seconds using a bounce easing effect. Built with D3.js version 3.5.5, the code selects an SVG element, appends a rectangle with explicit x, y, width, and height attributes, and applies a `transition().duration(3000).ease("bounce")` to animate the fill color. The visualization demonstrates basic SVG shape creation and property animation, with the rectangle remaining static in position while its color shifts. The source is a gist created by Sokrates86, rendered as inline SVG within an HTML page.

SSokrates86
85% match
Loading thumbnail…

fresh block

A single red rectangle sits on a blank canvas and gradually changes to blue over three seconds. The example demonstrates a basic shape transition using D3.js version 3.5.5, appending a rectangle to an SVG and applying a `transition().duration(3000).ease("bounce")` to animate its fill color between two hex values. The code is minimal, serving as a straightforward introduction to SVG rendering and animation with D3.

SSmith5mr
84% match
Loading thumbnail…

fresh block

A blue square fades to magenta over nearly three seconds, with a bouncing ease that makes the color transition feel playful. The example uses D3.js version 3.5.5 to append a single SVG `rect` element and applies a `transition().duration(2954).ease("bounce")` to animate its `fill` style. The rendering is entirely SVG-based, with the square fixed at 350 by 350 pixels and positioned at coordinates (100, 100). No data is loaded; the visualization simply demonstrates a basic animated style change.

WWanagram
83% match
Loading thumbnail…

fresh block

A red rectangle starts as a solid shape and then shifts to blue, demonstrating a simple color transition over three seconds. The example uses D3.js version 3.5.5 to append a single SVG `<rect>` element to the body and applies a `transition().duration(3000).ease("bounce")` to animate the `fill` style property. The page is built with Blockbuilder.org, and the rendering is entirely SVG-based with no external data source.

SSmith5mr
82% match
Loading thumbnail…

fresh block

A red rectangle starts as a solid shape and then shifts to blue, demonstrating a simple color transition over three seconds. The example uses D3.js version 3.5.5 to append a single SVG `<rect>` element to the body and applies a `transition().duration(3000).ease("bounce")` to animate the `fill` style property. The page is built with Blockbuilder.org, and the rendering is entirely SVG-based with no external data source.

SSmith5mr
82% match
Loading thumbnail…

fresh block

A simple animation demonstrates D3.js state changes using the `.transition()` and `.ease("bounce")` methods. A single SVG rectangle initially styled with a dark red fill (`#a72d1a`) transitions over three seconds to a light blue (`#5db9e3`). The example uses D3 3.5.5 and renders directly to an SVG element that fills the viewport. A console log confirms the D3 library is loaded. The code originates from a gist built with Blockbuilder.org and shows a minimal, self-contained transition without additional data or interaction.

YYasufumiSaito
81% match
Loading thumbnail…

Simple transition in v7

A blue circle transitions horizontally across a wide SVG canvas in this minimal demonstration of d3-transition. The circle moves from the left edge to the right over four seconds, using a chained `transition()` with a `duration(4000)` call after initial attributes are set. The example uses d3.v7 to select the body, append an SVG element, and define the circle’s fill, radius, and starting coordinates before applying the animation. No data source is involved; the code directly specifies all visual properties and the animation target position.

Dd3noob
81% match
Loading thumbnail…

SVG fundamentals E2

A red rectangle with a thick black border sits centered in an SVG canvas. The example demonstrates CSS transitions triggered by hover, causing the rectangle to gradually change its fill color to green while its stroke width expands from 20px to 100px over three seconds. The code uses plain SVG elements with inline CSS style rules, applying the `transition` property to all animated attributes. No external libraries or data sources are involved; the visualization relies solely on native SVG and CSS animation capabilities within an HTML document.

Ppanthabuddhi@gmail.com
81% match