Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
SSokrates86
Last edited Jan 10, 2016
Created on Jan 10, 2016

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.

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

fresh block

A single rectangular block animates its fill color from dark red to light blue over three seconds using a bounce easing effect. The visualization is built with D3.js version 3.5.5, using the `select` and `append` methods to create an SVG canvas and the `transition` API with a specified duration and easing function. The data source is a gist authored by ShuanWu, rendered as a static SVG animation without external datasets.

SShuanWu
91% 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
89% match
Loading thumbnail…

fresh block

A single turquoise square animates horizontally across an empty SVG canvas, moving from the left edge toward the center over three seconds. The block demonstrates D3.js version 3.5.5’s transition system, using the `transition().duration(3000).ease("bounce")` API to apply a bouncing ease to the rectangle’s `x` attribute change from -100 to 250. The visualization is minimal, showing only the rect element, with no data source or additional marks.

SSmith5mr
89% match
Loading thumbnail…

fresh block

A single turquoise square animates across a blank canvas, sliding from the left edge to the right using a bounce easing effect. The visualization demonstrates a basic D3.js transition over a three-second duration, manipulating the rectangle's x attribute. Rendered as an SVG element, the code uses d3.select and transition() with the "bounce" ease, showing a minimal example of shape movement and timing. The square begins partially off-screen and ends fully visible on the right side.

SSmith5mr
88% match