CSS Olympic Rings

This article revisits a 2020 project: animating 3D Olympic rings. The original SCSS code, while functional, lacked modern efficiency. This updated version uses pure CSS, leveraging trigonometric functions and relative color syntax for cleaner, more concise code. The result is a more performant and elegant solution.

The 3D effect is achieved using layered divs. Each ring comprises 16 layers, each a slightly different shade to create a lighting effect. The layers' size and positioning create the illusion of a three-dimensional ring.

HTML Structure

The HTML consists of five <div> elements (one per ring), each containing 16 nested <code><i></i> elements representing the layers. Each <i></i> element uses a custom property --i (ranging from 1 to 16) to control its styling via CSS. Emmet can simplify creating the repetitive HTML structure. Here's a snippet:

<div class="rings">
  <div class="ring ring__1">
    <i style="--i: 1;"></i>
    <i style="--i: 2;"></i>
    <!-- ... more layers ... -->
    <i style="--i: 16;"></i>
  </div>
  <!-- ... more rings ... -->
</div>

The --i property serves as a multiplier in CSS calculations for layer position, size, and color.

CSS Styling

The .rings container uses position: relative to contain the absolutely positioned rings. Each .ring is absolutely positioned, and its <i></i> children inherit absolute positioning. border-radius: 50% creates the circular shape. A custom property --ringColor sets the base color.

The inset property, set to a negative value, positions the layers outside the .ring element, effectively defining its size. The --translateZ custom property, calculated using --i, positions layers along the z-axis to create depth:

.ring {
  position: absolute;
  --ringColor: #0085c7;
  i {
    position: absolute;
    inset: -100px;
    border-radius: 50%;
    --translateZ: calc(var(--i) * 2px);
    transform: rotateY(-45deg) translateZ(var(--translateZ));
  }
}

Shading with Relative Color Syntax

Shading is achieved using the relative color syntax. A --light custom property, calculated from --i, modifies the lightness of --ringColor:

i {
  --light: calc(var(--i) / 16);
  --layerColor: rgb(from var(--ringColor) calc(r * var(--light)) calc(g * var(--light)) calc(b * var(--light)));
  border: var(--size) var(--layerColor) solid;
  outline: var(--size) var(--layerColor) solid;
}

This dynamically darkens layers towards the back, enhancing the 3D effect. An outline is added to ensure the shading is visible on both the inner and outer edges of the ring.

Shaping and Animation

The --size custom property, calculated using the sin() function, determines the border thickness, creating the ring's circular shape:

i {
  --size: calc(sin(var(--i) * 11.25deg) * 16px);
  /* ... other styles ... */
}

Animation is implemented using @keyframes and the animation property. Each ring's animation duration is controlled by a custom property --duration, with a negative delay to stagger the animations.

Final Touches and Optimization

A slight x-axis rotation on the .rings container adds perspective. Pseudo-elements (::after) create blurred shadows, further enhancing the 3D effect. The final CSS is highly optimized and reusable, demonstrating the power of modern CSS features. The code is significantly more efficient and maintainable than the original SCSS version.