Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ssukumardunn
Last edited Feb 1, 2023
Created on Jan 31, 2023
Forked from HTML Starter

A red circle sits at the center of a full-window SVG canvas. When the mouse enters the circle, a green circle and a black circle appear on top of it, and the red circle transitions its radius to 100 with a 750ms duration. On mouse leave, the circle returns to a radius of 40 and its red fill over 500ms. The example uses D3 v7 to append SVG elements and the `transition` API for animation, while `d3.interpolateRound` is called to compute a rounded interpolation value.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Animation

This example demonstrates a single-circle animation using D3 transitions. The visualization shows a red-outlined circle that starts at the left side of an SVG canvas and moves downward while changing its fill color to green over one second. The code appends an SVG element sized to the browser window, creates a circle with initial x-coordinate 200, then chains a transition with a 1000-millisecond duration to animate the y-coordinate, radius, and fill style. It uses D3 v6's `selection.transition()` and `transition.attr()` methods within a minimal HTML page.

MMTR
83% match
Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

AAveryBurke
83% match
Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

AAveryBurke
83% match
Loading thumbnail…

TD1

Three circles—green, blue, and red—sit in a row on a gray SVG canvas. Clicking a rectangle starts a two-second animated transition that moves the red circle diagonally downward, followed by a second transition returning it horizontally. The red circle also turns black on mouseover, while the green circle responds to hover via a CSS class. Built with D3 v5, the example demonstrates selections, event handlers, and chained `transition.attr` calls, with no external data source.

LLauranJade
81% match
Loading thumbnail…

Untitled

This example shows a set of overlapping circles and ellipses inside an SVG canvas, demonstrating CSS-driven interactivity and animation. Three yellow circles with green strokes transition their radius and stroke-width over five seconds when hovered, while three nested ellipses change their fill color to blue on hover. Built with React and rendered using SVG markup, the visualization relies on CSS properties like `transition`, `r`, and `stroke-width`, applied directly to SVG elements. The source code uses a basic HTML structure with inline styles, illustrating how CSS can directly manipulate SVG shapes without JavaScript logic.

Kkaline
81% match
Loading thumbnail…

Untitled

A cursor-driven animation creates expanding, fading circles in response to mouse movement. Each pointer position triggers a new circle that grows from a tiny point to a radius of 100 pixels over two seconds while its stroke opacity fades to zero, then removes itself from the SVG. The code uses d3.v3 with SVG transitions, appending circles with `transition().duration(2000).ease(Math.sqrt)` and styling each stroke with a rotating `d3.hsl` color. A transparent background rect captures mouse and touch events to drive the particle generation.

Ppoppy
81% match
Loading thumbnail…

Untitled

A red circle remains static until hovered, at which point it smoothly scales to twice its size. This interaction is achieved through a CSS `transition` on the `transform` property, triggered by the `:hover` pseudo-class. The example uses raw HTML and SVG within a single `index.html` file, with no external JavaScript or libraries, demonstrating a simple yet effective hover effect in a React-compatible format.

Ppratyush giri
81% match
Loading thumbnail…

Create an animated circle with D3

A circle in an SVG transitions through a sequence of fill colors—red, steelblue, and orange—then shrinks to a radius of zero and expands back to its original size while turning black. The example demonstrates D3 v5's chained transitions, where each `transition()` call queues a new animation stage with specified `duration` and optional `delay`. The circle is appended to the body via `d3.select`, and its position and initial radius are set with SVG attributes, while styling from the page's CSS centers the content.

NNita
80% match