fresh block

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.

94% match

fresh block

94% match

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

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.

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

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

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.