AI CSS Animations

Lighthouse Beam

A hairline lighthouse on its rock sweeps a translucent accent beam around in true isometric, passing behind the lantern and over the tower, while a small boat bobs past.

Also known as: lighthouse animation, isometric lighthouse, hairline animation.

HTML

<div class="hln-lighthouse-beam" role="img" aria-label="A lighthouse sweeps its beam while a boat passes"><svg viewBox="-62 -49.82 124 67.64" aria-hidden="true"><line x1="-44" y1="-12" x2="-39" y2="-9.5" class="hln-lighthouse-beam-l"/><line x1="-52" y1="0" x2="-47" y2="2.5" class="hln-lighthouse-beam-l"/><line x1="-10" y1="25" x2="-5" y2="27.5" class="hln-lighthouse-beam-l"/><line x1="14" y1="21" x2="19" y2="23.5" class="hln-lighthouse-beam-l"/><line x1="-42" y1="13" x2="-37" y2="15.5" class="hln-lighthouse-beam-l"/><line x1="40" y1="14" x2="45" y2="16.5" class="hln-lighthouse-beam-l"/><line x1="-20" y1="-20" x2="-15" y2="-17.5" class="hln-lighthouse-beam-l"/><g class="hln-lighthouse-beam-boat"><g class="hln-lighthouse-beam-bob"><polygon points="-60,-10 -51,-5.5 -51,-4.9 -55,-4.9 -64,-9.4 -60,-11.4"/><polygon points="-64,-9.4 -55,-4.9 -55,-3.5 -64,-8"/><polygon points="-55,-4.9 -51,-4.9 -51,-5.5 -55,-3.5"/><polygon points="-58,-8.4 -58,-17 -54,-7.4" class="hln-lighthouse-beam-l"/></g></g><g><polygon points="-20,0 0,10 0,7 -20,-3"/><polygon points="20,0 0,10 0,7 20,-3"/><polygon points="0,-13 20,-3 0,7 -20,-3"/></g><g><polygon points="-19,-4.5 -15,-2.5 -15,-4.5 -19,-6.5"/><polygon points="-6,-7 -15,-2.5 -15,-4.5 -6,-9"/><polygon points="-10,-11 -6,-9 -15,-4.5 -19,-6.5"/></g><g><polygon points="-8,10 -1,13.5 -1,11.9 -8,8.4"/><polygon points="3,11.5 -1,13.5 -1,11.9 3,9.9"/><polygon points="-4,6.4 3,9.9 -1,11.9 -8,8.4"/></g><g><polygon points="-19,3.5 -13,6.5 -13,5.3 -19,2.3"/><polygon points="-10,5 -13,6.5 -13,5.3 -10,3.8"/><polygon points="-16,0.8 -10,3.8 -13,5.3 -19,2.3"/></g><path d="M-5.09,-33 L-7.64,-3 A7.64,3.82 0 0 0 7.64,-3 L5.09,-33 Z"/><ellipse cx="0" cy="-33" rx="5.09" ry="2.55"/><path d="M-6.79,-13 A6.79,3.39 0 0 0 6.79,-13" fill="none" class="hln-lighthouse-beam-l"/><path d="M-5.94,-23 A5.94,2.97 0 0 0 5.94,-23" fill="none" class="hln-lighthouse-beam-l"/><rect class="hln-lighthouse-beam-l" x="-0.6" y="-16.4" width="1.2" height="3.2" rx="0.6"/><path d="M-1.3,0.9 v-3.2 a1.3,1.3 0 0 1 2.6,0 v3.2"/><path d="M-7.92,-34.2 L-7.92,-33 A7.92,3.96 0 0 0 7.92,-33 L7.92,-34.2 Z"/><ellipse cx="0" cy="-34.2" rx="7.92" ry="3.96"/><path fill="none" d="M-7.92,-36.6 A7.92,3.96 0 0 1 7.92,-36.6"/><g><g transform="translate(0 -36.6) matrix(1 0.5 -1 0.5 0 0)"><g class="hln-lighthouse-beam-spin"><polygon class="hln-lighthouse-beam-beam" points="0,0 46,-9 46,9"/></g></g></g><path d="M-4.24,-39.2 L-4.24,-34.2 A4.24,2.12 0 0 0 4.24,-34.2 L4.24,-39.2 Z" class="hln-lighthouse-beam-a"/><ellipse cx="0" cy="-39.2" rx="4.24" ry="2.12" class="hln-lighthouse-beam-a"/><line x1="2.22" y1="-32.39" x2="2.22" y2="-37.39"/><line x1="0" y1="-32.08" x2="0" y2="-37.08"/><line x1="-2.22" y1="-32.39" x2="-2.22" y2="-37.39"/><path d="M-4.81,-39.2 A4.81,3.4 0 0 1 4.81,-39.2 A4.81,2.4 0 0 1 -4.81,-39.2 Z"/><circle cx="0" cy="-43.2" r="0.8"/><path d="M-7.92,-36.6 A7.92,3.96 0 0 0 7.92,-36.6" fill="none"/><line x1="7.53" y1="-32.98" x2="7.53" y2="-35.38"/><line x1="0" y1="-30.24" x2="0" y2="-32.64"/><line x1="-7.53" y1="-32.98" x2="-7.53" y2="-35.38"/><clipPath id="hln-lighthouse-beam-near"><rect x="-120" y="-36.6" width="240" height="120"/></clipPath><g clip-path="url(#hln-lighthouse-beam-near)"><g transform="translate(0 -36.6) matrix(1 0.5 -1 0.5 0 0)"><g class="hln-lighthouse-beam-spin"><polygon class="hln-lighthouse-beam-beam" points="0,0 46,-9 46,9"/></g></g></g></svg></div>

CSS

.hln-lighthouse-beam {
  --c: var(--hln-color, #ff4f2e);
  font-size: var(--hln-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 0.75em;
  background: #f6f5f1;
  overflow: hidden;
  --u: 1px;
}
.hln-lighthouse-beam svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-lighthouse-beam svg * {
  vector-effect: non-scaling-stroke;
}
.hln-lighthouse-beam-l {
  stroke: #9a9ca3;
}
.hln-lighthouse-beam-a {
  fill: var(--c);
}
.hln-lighthouse-beam-beam {
  fill: var(--c);
  fill-opacity: 0.14;
  stroke: var(--c);
  stroke-opacity: 0.7;
}
.hln-lighthouse-beam-spin {
  animation: hln-lighthouse-beam-spin 8s linear infinite;
}
.hln-lighthouse-beam-boat {
  animation: hln-lighthouse-beam-boat 8s linear infinite;
}
.hln-lighthouse-beam-bob {
  animation: hln-lighthouse-beam-bob 2s linear infinite;
}
@keyframes hln-lighthouse-beam-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes hln-lighthouse-beam-boat {
  0% { opacity: 0; transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  10% { opacity: 1; transform: translate(calc(var(--u) * 8), calc(var(--u) * 4)); }
  90% { opacity: 1; transform: translate(calc(var(--u) * 72), calc(var(--u) * 36)); }
  100% { opacity: 0; transform: translate(calc(var(--u) * 80), calc(var(--u) * 40)); }
}
@keyframes hln-lighthouse-beam-bob {
  0%, 100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  50% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -0.7)); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-lighthouse-beam * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 1.2s) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-lighthouse-beam, .hln-lighthouse-beam *, .hln-lighthouse-beam::before, .hln-lighthouse-beam::after, .hln-lighthouse-beam *::before, .hln-lighthouse-beam *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --hln-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --hln-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar hairline animations

Parcel to Doorstep
Sorting Belt Diverter
Stamping Press Line
City Block Night Shift