Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes and Colors with SVG and CSS

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed