Media

Every image and the video on this page were generated (a gradient landscape, the Mandelbrot set, a seeded plasma), in several formats and sizes: the browser picks what it supports and what fits.

Responsive images

Each <picture> offers AVIF, then WebP, then JPEG, each at three widths with srcset and sizes. The images below the fold load lazily.

Fitting and shaping

object-fit and aspect-ratio fit one image into different boxes:

clip-path, mask-image and mix-blend-mode shape and blend:

Blend

CSS filters, chosen with the buttons:

None Grayscale Sepia Hue Blur Contrast

SVG

Canvas

Draw on the canvas with the pointer; the wave behind your strokes is redrawn every frame.

Video

A zoom into the Mandelbrot set, as WebM (VP9) or MP4 (H.264), with a poster and captions from a WebVTT track. The controls are the page's own: the browser's are drawn outside the page's DOM.

Audio

A rising chord, as Opus or MP3, with the page's own play button.

In a panel

• The browser's own video controls and caption rendering are drawn outside the page: this page draws its own.
• A synthetic press is not a user gesture, so the browser does not let the page start sound: the audio says why it did not play.
• A playing video is copied frame by frame, as images: it plays, but at the panel's pace.