v138 · css

Timeline Chart

A CSS-only colour-coded Gantt chart where each track's hue is computed from sibling-index() / sibling-count() × 240° — add or remove tasks and the colour wheel redistributes automatically. No JavaScript colour math.

Feature detection: checking…
Project:
Web Platform project ▸ today 
    /* Each track bar gets its hue from sibling-index() */
.track {
  --si: sibling-index();
  --sc: sibling-count();
}

.track {
  color: hsl(
    calc(var(--si) / var(--sc) * 240deg)
    55% 45%
  );
}

.track-bar { background: currentColor; }

    references

    see also