Pure CSS Products & branding #loop #product #logo #brand

Extruded logo in pure CSS

One clip-path shape repeated in 14 layers, two units apart. The stack reads as a solid block; back layers are darker and the front one carries a sweeping shine.

  • 68 lines of CSS
  • 7 lines of HTML
  • No JavaScript
  • No dependencies
  • Snippet under MIT
GitHub

How it works

  1. The mark is one clip-path: polygon(evenodd, …). The path runs round the hexagon, jumps in and traces the triangle; with evenodd the area enclosed twice becomes a hole.
  2. Every length is a multiple of one base unit, --u, so the mark is the same share of a gallery card, the editor and a recording canvas.
  3. Fourteen copies of that shape are stacked two units apart with translateZ(calc((var(--i) - 6.5) * 2 * var(--u))). Seen at an angle their edges overlap into a solid side, and the hole gets inner walls for free.
  4. Each layer lays a dark gradient over the colour, with an alpha that shrinks as --i grows: rgb(6 7 20 / calc(0.6 - var(--i) * 0.033)). The side fades from bright to dark like a lit extrusion.
  5. The front layer is the face. Its shine is a pseudo-element moved with translateX only; the layer’s clip-path clips it to the logo, so it never spills out.

Key techniques

  • clip-path polygon with a hole (evenodd)
  • translateZ per layer from --i
  • darkening by depth with calc() alpha
  • shine moved with transform only

HTML 7 lines

<div class="scene">
  <div class="logo">
    <i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i>
    <i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i>
    <i style="--i:10"></i><i style="--i:11"></i><i style="--i:12"></i><i style="--i:13"></i>
  </div>
</div>

CSS 68 lines

.scene {
  /* one base unit: every length below is a multiple of it, so the mark is the same share of a
     card, the editor, a full screen and a recording canvas */
  --u: 0.48vmin;
  perspective: calc(800 * var(--u));
}

.logo {
  position: relative;
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
  transform-style: preserve-3d;
  animation: sway 6s ease-in-out infinite alternate;
}

/* soft glow far behind the mark */
.logo::before {
  content: '';
  position: absolute;
  inset: calc(-26 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(139 108 255 / 0.38), transparent);
  transform: translateZ(calc(-60 * var(--u)));
}

.logo > i {
  /* back layers darker */
  --shade: calc(0.6 - var(--i) * 0.033);
  position: absolute;
  inset: 0;
  /* hexagon, then a jump in to trace the "play" triangle: evenodd makes it a hole */
  clip-path: polygon(evenodd,
    50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%, 50% 0,
    39% 31%, 71% 50%, 39% 69%, 39% 31%);
  background:
    linear-gradient(rgb(6 7 20 / var(--shade)), rgb(6 7 20 / var(--shade))),
    linear-gradient(135deg, #8b6cff, #ff4d9d);
  /* 14 layers, 2 units apart, centred on the middle */
  transform: translateZ(calc((var(--i) - 6.5) * 2 * var(--u)));
}

/* the front layer is the face */
.logo > i:last-child {
  background:
    radial-gradient(circle at 30% 18%, rgb(255 255 255 / 0.45), transparent 45%),
    linear-gradient(135deg, #a28aff, #ff4d9d 70%, #ffb547);
}

/* the shine: clipped by the layer's clip-path, moved with transform only */
.logo > i:last-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.7) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: shine 4s ease-in-out infinite;
}

@keyframes sway {
  from { transform: rotateX(-10deg) rotateY(-40deg); }
  to   { transform: rotateX(-4deg) rotateY(40deg); }
}

/* both ends are off the logo, so the jump back is never seen */
@keyframes shine {
  0%, 45%   { transform: translateX(-100%); }
  80%, 100% { transform: translateX(100%); }
}
Standalone snippet · plain CSS, no build step, no dependencies.

More products & branding

Cut gem Magnetic button