Blocks · Backgrounds

Animated Beam

An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.

LSD FX: lsd-fx--animated-beam ↩ Backgrounds

01 · live

Pattern

Animated Beam

An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.

View generated HTML

<h2 class="im-heading">Animated Beam</h2>
<p class="im-text">An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.</p>
<div class="lsd-frame" style="min-height: 200px; display: grid; place-items: center;">
  <svg class="lsd-fx--animated-beam" viewBox="0 0 400 100" width="400" height="100" aria-hidden="true">
    <path d="M 20 50 Q 100 10, 200 50 T 380 50" />
  </svg>
</div>

LSD blocks · Backgrounds · Animated Beam

↩ Backgrounds