Animations/Staircase Chart ClipPath

Staircase Chart ClipPath

Graphe en escalier interactif — le curseur revele progressivement les lignes colorees via clipPath.

hoverSVGJSdashboardchart
Trigger: Mouse move
CSS requis: Non
Difficulte: medium

Preview live

Code

"use client";
import { useCallback, useRef, useState } from "react";

// Graphe en escalier avec clipPath interactif
const greenPath = "M0,247.5L37.72,247.5...L830,0";
const orangePath = "M0,330L75.44,330...L830,55";

// ClipPath = rectangle de 0 a mouseX
<svg viewBox="0 0 830 340">
  <clipPath id="reveal"><rect x={0} y={0} width={mouseX} height={H} /></clipPath>
  <path d={greenPath} stroke="rgba(0,255,0,0.15)" />
  <g clipPath="url(#reveal)">
    <path d={greenPath} stroke="#4ade80" strokeWidth={3} />
  </g>
</svg>

Instructions

Le curseur controle un clipPath rectangle qui revele progressivement les lignes colorees. Les paths SVG en escalier sont definis en dur. Le fond est une version attenuee des memes paths.