Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes and Colors with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

c8a58b12cbe7420c95bf6c6f3f9f2f44

Shapes and Colors with SVG and CSS

0 stars0🌍 Public
Jjesramyep1263
Last edited Apr 13, 2020
Created on Apr 13, 2020

Fifty circles arranged vertically cycle horizontally across the screen in an animated loop. Each circle’s fill color transitions from light yellow to dark navy based on its vertical position, using a linear scale with HSL interpolation. The example demonstrates SVG shape rendering and CSS styling, with animations driven by D3 v4’s `transition` and `d3.active()`. The code uses `d3.scalePoint` for layout and `d3.scaleLinear` for color mapping, all within a single SVG canvas.

AI-generated description

An example including some commonly used features of SVG.