ecg-grid

Utilities for drawing ECG paper behind a trace.

Installation

If your project has OrganUI's utilities, you already have ecg-grid. Otherwise, add them once:

bunx shadcn@4.22.1 add https://organui.com/r/utilities.json

The CLI adds them to your global CSS file, after your theme. To add them by hand, paste this instead:

:root {
  --severity-normal: oklch(0.448 0.119 151.328);
  --severity-info: oklch(0.488 0.243 264.376);
  --severity-warning: oklch(0.473 0.137 46.201);
  --severity-critical: oklch(0.505 0.213 27.518);
}

.dark {
  --severity-normal: oklch(0.792 0.209 151.711);
  --severity-info: oklch(0.707 0.165 254.624);
  --severity-warning: oklch(0.828 0.189 84.429);
  --severity-critical: oklch(0.704 0.191 22.216);
}

@theme inline {
  --color-severity-normal: var(--severity-normal);
  --color-severity-info: var(--severity-info);
  --color-severity-warning: var(--severity-warning);
  --color-severity-critical: var(--severity-critical);
}

@keyframes heartbeat {
  0%, 40%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.12);
  }
  20% {
    transform: scale(1.02);
  }
  30% {
    transform: scale(1.08);
  }
}

@utility animate-heartbeat {
  animation: heartbeat var(--heartbeat-duration, 1s) ease-in-out infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@utility heartbeat-rate-* {
  --heartbeat-duration: calc(60s / --value(integer));
}

@utility bg-ecg-grid {
  --ecg-grid-minor: color-mix(in oklch, var(--ecg-grid-color, var(--color-red-500)) 18%, transparent);
  --ecg-grid-major: color-mix(in oklch, var(--ecg-grid-color, var(--color-red-500)) 45%, transparent);
  --ecg-grid-step: var(--ecg-grid-size, 4px);
  background-image: linear-gradient(to right, var(--ecg-grid-major) 1px, transparent 1px), linear-gradient(to bottom, var(--ecg-grid-major) 1px, transparent 1px), linear-gradient(to right, var(--ecg-grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--ecg-grid-minor) 1px, transparent 1px);
  background-size: calc(var(--ecg-grid-step) * 5) calc(var(--ecg-grid-step) * 5), calc(var(--ecg-grid-step) * 5) calc(var(--ecg-grid-step) * 5), var(--ecg-grid-step) var(--ecg-grid-step), var(--ecg-grid-step) var(--ecg-grid-step);
}

@utility ecg-grid-size-* {
  --ecg-grid-size: calc(var(--spacing) * --value(number));
}

@utility ecg-grid-color-* {
  --ecg-grid-color: --value(--color-*, [color]);
}

Usage

ecg-grid classes
Class	Styles
`bg-ecg-grid`	Draws ECG paper: a fine line every --ecg-grid-size (4px by default) and a bolder line every fifth.
`ecg-grid-size-<number>`	--ecg-grid-size: calc(var(--spacing) * <number>);
`ecg-grid-color-<color>`	--ecg-grid-color: <color>; any theme colour, such as ecg-grid-color-sky-500, or a value in brackets. Red by default.

<div className="h-40 rounded-lg border bg-ecg-grid">
  {/* Your trace, such as an SVG path */}
</div>

Notes

The grid sets no paper speed. At 25 mm/s with 1 mm squares, one small square is 40 ms and one large square 200 ms; scale your trace to match.

The ECG trace component draws its own grid on its canvas. Use this utility for static strips, thumbnails and backgrounds.