Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Pseudo Bullet Chart

Public visualization

SVG Pseudo Bullet Chart

0 stars0🌍 Public
WWolfgang
Last edited May 5, 2021
Created on May 5, 2021

Four horizontal bars form a pseudo bullet chart, each using stacked gray segments to represent qualitative ranges. A thin white animated rectangle slides across each bar to indicate the current value, while a thick black tick marks a target or threshold. Built entirely with SVG shapes, the chart uses plain `rect` and `line` elements, styled with CSS. The animation leverages CSS `@keyframes` and the `width` property changes, with each bar cycling at a different duration.

AI-generated description

A demonstration of SVG shapes.

Comments

Sign in to join the discussion.

MIT Licensed