Sync Ratio Chart
Pure SVG dual sinusoidal waveform chart with continuous oscilloscope-like movement. Zero external charting dependencies. Uses requestAnimationFrame for smooth real-time wave animation after an initial draw-in effect.
[SRC]tsx
1import { SyncRatioChart } from "@mdrbx/nerv-ui";
Basic Usage
DEFAULTinspection frame
live inspectionframe-01
FREQ: 0.040Hz / 0.055HzAMP: 50px / 40px
Custom Frequencies
HIGH FREQinspection frame
live inspectionframe-01
FREQ: 0.080Hz / 0.120HzAMP: 40px / 30px
Fast Speed
SPEED x3inspection frame
live inspectionframe-01
FREQ: 0.040Hz / 0.055HzAMP: 50px / 40px
Without Grid
NO GRIDinspection frame
live inspectionframe-01
FREQ: 0.040Hz / 0.055HzAMP: 50px / 40px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| frequencyA | number | 0.04 | Wave A frequency |
| frequencyB | number | 0.055 | Wave B frequency |
| amplitudeA | number | 50 | Wave A amplitude in pixels |
| amplitudeB | number | 40 | Wave B amplitude in pixels |
| phaseA | number | 0 | Wave A phase offset in radians |
| phaseB | number | 1.2 | Wave B phase offset in radians |
| showGrid | boolean | true | Show green grid background |
| title | string | — | Chart title |
| animated | boolean | true | Enable draw-in + continuous oscillation |
| speed | number | 1 | Speed multiplier for wave oscillation |
| className | string | "" | Additional CSS classes |
[i]CONTINUOUS MOVEMENT
Waves oscillate continuously via requestAnimationFrame. Initial draw-in
animation plays for 1.5 seconds, then seamlessly transitions to real-time
oscillation. Wave B moves at 0.7× the speed of Wave A for organic visual
variety.