Pure CSS charts with st-core@v2 (and Svelte, if you want)

st-core is FSCSS module that draws area/line charts with clip-path and CSS variables — no SVG, no canvas, no chart library.

Repo: github.com/fscss-ttr/st-core.fscss

What v2 adds

• Any length series via @arr (not only 8 fixed points)
• Even X spacing from array length
• Y as num(100 - value)% so “higher score = higher on the chart”
• Fill + dual-pass line stroke, dots, grid, stat card, phone shell

Needs FSCSS ≥ 1.2.3.

30-second HTML

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.3/runtime.min.js" async></script>
<style>
  @import((*) from st-core@v2)
  @st-root()
  @arr myData[56, 67, 70, 43, 67, 80]
  @st-chart-fill(.chart-fill, myData)
  @st-chart-line(.chart-line, myData)
  .chart {
    @st-chart-points(myData)
    position: relative;
    height: 200px;
  }
</style>
<div class="chart">
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

Live data? Only update --st-p1, --st-p2, … — CSS does the rest.

Production + Svelte

Don’t ship the FSCSS runtime just for static chart CSS.

1. Compile: fscss chart.fscss chart.css
2. Import the CSS
3. Let Svelte set variables:

$: cssVars = data.map((v, i) => `--st-p${i + 1}: ${100 - v}%`).join('; ')

Guide + sample: integration/svelte

HTML demos: integration/html

Open to more stacks

Vue, React, Astro, … — same pattern. See integration/README.md and PR a folder if you want to share how you wire it.

Under the hood: EXPLAINED.md

FSCSS builds the renderer. Your app only moves the numbers.