Sparkline Gagan

14-day balance trajectory chart. SVG-based with catmull-rom smoothed path. Split coloring above and below the zero reference line — teal-pale when you're owed, coral-pale when you owe. A dashed zero line anchors the chart. End dot with paper ring marks the current value.

Teal — balance in your favour

Coral — balance in deficit

Mixed — crosses zero

When the trajectory crosses zero, the path is split at the intersection point and each segment is colored independently. The end dot color always reflects the current (rightmost) side — teal if the latest value is above zero, coral if below.

Anatomy

Smoothed path (1.5px stroke)

Area fill (45% opacity)

Zero reference line

End dot with paper ring

Component status

New component — not yet in library Sparkline is a new component introduced in Gagan's designs with no prior equivalent in the Settld design system. It should be added as a visualization primitive. Recommendation: codify the catmull-rom smoothing algorithm, the zero-crossing clip logic, and the split-color behavior in a reusable component before shipping to product. The 320×72 viewBox is a baseline; the component must accept arbitrary data arrays and scale accordingly.

Spec

Property	Value	Notes
Data input	`number[]`	14 data points (one per day). Any numeric range.
SVG viewBox	320 × 72	10px padding on all sides
Path smoothing	Catmull-rom → cubic bezier	Convert control points at render time
Stroke width	1.5px	Path line only; area fill has no stroke
Area opacity	45%	Soft fill, not solid
Zero line dash	3 4	`stroke-dasharray: 3 4`
End dot outer	r=5, paper fill	Ring creates separation from path
End dot inner	r=2.5, colored fill	Matches current side color
Color — above zero	`--teal` / `--teal-pale`	Owed to you
Color — below zero	`--coral` / `--coral-pale`	You owe

Accessibility

Screen readers SVG sparklines are decorative in context — the numeric balance is already announced by the odometer or amount-display nearby. Add aria-hidden="true" to the SVG element. If the sparkline is the only way the trend is communicated, add a visually hidden description: e.g. "Balance trend over last 14 days: started at ₹1,200, currently ₹4,200, trending up."

Code

SVG structure

<div class="sparkline" style="width:320px; height:72px;">
  <svg viewBox="0 0 320 72" aria-hidden="true">
    <!-- Zero reference line -->
    <line class="sparkline-zero"
          x1="10" y1="36" x2="310" y2="36"/>
    <!-- Area fill (closed path back along zero line) -->
    <path class="sparkline-area-teal" d="..."/>
    <!-- Smoothed path line -->
    <path class="sparkline-path sparkline-path-teal" d="..."/>
    <!-- End dot: outer ring + inner fill -->
    <circle class="sparkline-dot-ring sparkline-dot-ring-teal"
            cx="310" cy="20" r="5"/>
    <circle class="sparkline-dot-core sparkline-dot-core-teal"
            cx="310" cy="20"/>
  </svg>
</div>

Design tokens used

Token	Value	Role
`--teal`	#0E7C66	Path stroke, dot fill — above zero
`--teal-pale`	#D6EAE2	Area fill — above zero
`--coral`	#E76F51	Path stroke, dot fill — below zero
`--coral-pale`	#FADED4	Area fill — below zero
`--ink-line`	#DDD2B8	Zero reference line stroke
`--s-paper`	#FBF8F0	End dot ring fill

See it in context

Interactive prototype — this component is live below. Tap, swipe, and drag to explore.

The sparkline is the second slide in the viz carousel. Swipe the carousel right to see the 14-day SVG line chart with the animated draw-on and pulse dot.