Websites Need More Mario UI
A short recreation of the animated background from a Mario level-complete screen using CSS repeating patterns, gradients, and a sawtooth edge. The video walks through each visual layer and the tricks that make seamless looping work. ---
Key Concepts
| Concept | Definition |
|---|---|
| Repeating background pattern | A tileable image where half-shapes placed on opposite edges create a seamless tile when repeated |
| CSS background-size + animation | Setting a small `background-size` causes automatic repetition; animating `background-position` creates the illusion of continuous movement |
| Vignette/fade overlay | An absolutely-positioned gradient that is transparent in the center and opaque at the edges, making pattern elements appear to emerge and disappear naturally |
| Diagonal stripe pattern | A `linear-gradient`-based repeating stripe; the trick is animating its position across the container width so all stripes move in sync, producing a single flowing pattern |
| Sawtooth edge | A CSS/SVG technique for a jagged bottom border; acknowledged as tricky to recall from memory |
Notes
Star Background Layer
- Draw a star tile with half-stars on top/left edges and the complementary halves on bottom/right edges
- Drop it in a `div` — CSS will auto-repeat it to fill the space
- Animate `background-position` from left to right over a slow duration (a few minutes) for subtle panning
Color & Gradient Base
- Pick a couple of RGB values and build a gradient for the background color
- Place the gradient in a **parent container** so it sits behind the star layer
Edge-Fade Overlay
- Create a second gradient that is **transparent in the center, opaque at the edges**
- Position it `absolute` on top of the star layer
- Result: stars seem to fade in/out at the borders rather than hard-clip
Diagonal Stripe Layer
- A diagonally striped `linear-gradient` pattern — specifics are non-trivial to recall
- Animate the pattern's `background-position` across the full container width
- Because the pattern repeats by default, all stripe squares move in sync → looks like one continuous moving surface
Sawtooth Edge
- Final layer: a jagged/sawtooth bottom border
- Author is aware a CSS solution exists but finds the specifics hard to reproduce without reference
- Left partially open / implied use of a lookup or tool
Actionable Takeaways
- For any seamless looping pattern, place half-shapes on opposite tile edges — the browser's default `background-repeat` does the rest
- Use an absolutely-positioned center-transparent gradient overlay to soften pattern edges without clipping
- Animating `background-position` on a repeating gradient (not just an image) is enough to simulate a full-screen moving pattern cheaply
- Keep a reference snippet for diagonal `linear-gradient` patterns and sawtooth edges — they're hard to reconstruct from memory
Quotes Worth Keeping
I have precisely zero interest in storing the knowledge required to produce a diagonally striped linear gradient pattern in my brain.
The combination of hundreds of these little squares moving in sync with one another gives the appearance of one singular pattern.