HTML + CSSBackgrounds

XY oscilloscope

Lissajous figures glow in green phosphor over the graticule of an oscilloscope, and the pointer shifts their phase, on canvas.

Settings

1x
1x
1

Code

<div class="pt-uvq16-oscilloscope"><canvas></canvas><i class="gr"></i><i class="gl"></i></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Backgrounds

See all Backgrounds

Where to use it

Two sine waves fed into the X and Y inputs of an old analog scope. Each frame draws the full curve three times with additive blending, a wide faint glow, a thinner beam and a bright core, while a translucent fill leaves a phosphor afterglow. The frequency ratio changes every few seconds, from 3 to 2 to 5 to 4 and more, with a soft fade.

The first color is the phosphor, the second the hot core of the beam and the third the graticule lines, with major divisions and fine ticks on the axes. Move the pointer sideways to turn the phase. Fits audio gear, synth makers, electronics and lab themed sites.