Comparison of the same area on two different pages (drag to compare)
The background starfield on lunnova.dev updates slightly when changing pages; it's actually the same repeating SVG patterns viewed from different positions.
Fixed background galaxies represented by static dots juxtaposed with changing closer dot and gradients tries to give the impression of moving within a nebula.
- Distinct tile sizes create a large non-repeating composite pattern period, although each tile's repeats are visible if you look closely
- Opposite anchors against the full viewport: `top-left` vs `bottom-right` means different article heights reveal different portions of the tiled patterns
### Implementation layer 1: html element
- SVG tiled at 607×613px
- Anchored to `left top`
- Lots of stars, varying sizes (0.5-2px) and colors
```html
```
```css
html {
background: url("data:image/svg+xml,...") repeat left top / 607px 613px,
/* gradient layers below. it's nebula time! */
}
```
### Implementation layer 2: body element
- SVG tiled at 373×373px
- Anchored to `right bottom`
- Fewer stars, sparser distribution
```html
```
```css
body {
background: transparent url("data:image/svg+xml,...");
background-size: 373px 373px;
background-position: right bottom;
}
```
### Implementation layer 3: body::after element
You get the idea! Another layer with a distinct size, and this time `background-position: calc(13vw + 47px) calc(19vh + 83px);` to make its position unique with the other tiles as the viewport changes.
