Skip to main content
100%

SVG Pseudo Bullet Chart

✓ Published0🌍 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.

MIT Licensed

Similar vizzes