# Dashed ring

The ticked circle that sits behind a title or a deck — a huge ring, far
wider than the page, so only its flanks cross and it reads as an arc either
side rather than a ring around.

## No asset

```css
.ring {
  --r: 34vw;
  position: absolute;
  z-index: -1;
  left: 50%; top: 56%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,.26) 0 .16deg,
    transparent .16deg 2.2deg
  );
  -webkit-mask-image: radial-gradient(circle closest-side,
    transparent calc(100% - 7px), #000 calc(100% - 7px));
  mask-image: radial-gradient(circle closest-side,
    transparent calc(100% - 7px), #000 calc(100% - 7px));
  pointer-events: none;
}
```

A conic gradient makes the ticks; the mask keeps only a hairline band at
the rim, so it reads as marks on a circle rather than a filled starburst.
No SVG to fetch, and it scales with the viewport.

## The trap that makes it invisible

**`closest-side` is load-bearing.** A bare `radial-gradient(circle, …)`
sizes itself *farthest-corner*, so `100%` is the box's **diagonal** — 867px
on a 613px radius. The opaque band then lands entirely outside the circle
and the mask hides the whole thing. The element is in the DOM at exactly
the right size and paints nothing, which reads as simply missing rather
than as a bug.

## Scale it to the ground it is on

A ring tuned for a dark section will shout on a light one. Going from dark
to light, bring the radius in and thin the ticks — on black they read as
texture, on white the same values sweep the full width of the section and
pull more attention than the content.

## Prompt

> Draw a dashed ring behind a section with CSS only. A circle far wider than
> the viewport, centred horizontally and positioned so only its left and
> right flanks cross the section. Fill it with a repeating conic gradient of
> fine ticks and mask it to a hairline band at the rim using
> `radial-gradient(circle closest-side, …)` — `closest-side` is required, or
> 100% resolves to the box diagonal and the band falls outside the circle.
> Negative z-index, pointer-events none.