Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aanemochore
Last edited Jan 17, 2016
Created on Jan 17, 2016

A red rectangle transitions to blue over three seconds on a blank SVG canvas. The animation uses D3’s `transition().duration(3000).ease("bounce")` to change the rectangle’s fill style, demonstrating basic shape rendering and tweening with d3.js 3.5.5. The code directly appends an SVG `rect` element to the body and logs a message to the console. No data source is involved; the example focuses solely on a single animated visual primitive.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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
93% 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
93% 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
93% match
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
93% 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
92% match
Loading thumbnail…

fresh block

A blank burgundy rectangle fades to sky blue over three seconds inside an SVG canvas. The example demonstrates D3.js version 3.5.5 transitions and easing functions, using `d3.select` to append a `rect` and apply a `.transition()` with a `"bounce"` easing effect. The source is a Blockbuilder-generated single-file project, rendered entirely in SVG with no external data—only static shape attributes and CSS styling define the visual output.

AAdamBlaine1
90% 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
89% match
Loading thumbnail…

fresh block

A single large rectangle sits against a plain background, initially drawn in dark red before transitioning to a bright blue over three seconds. The animation uses a D3 transition with a bounce easing, applied to the rectangle’s fill style. The visualization is built with D3.js (version 3.5.5) and rendered as an SVG element that fills the viewport. The code originates from a Blockbuilder.org gist and demonstrates a minimal, animated color change without any data or interactivity.

JJonasHeylen
89% match