Liquid Logo®

Embed test. Three logos on one long page. Swipe up and down over them: the page should scroll. Swipe sideways or in circles: the ink should stir.

One tag,
three times

01 · Defaults
– 
<liquid-logo src="harbour-static-mark.svg" colors="#4F9DDE,#F2B134" label="Harbour Static"></liquid-logo>

Live attributes

These change the first logo's attributes while it runs. Nothing reloads.

Re-forming
Colours
Logo

A logo you can touch is a hero section people play with. This paragraph is here to be scrolled past, so the first logo leaves the screen and its loop pauses.

02 · Own colours, firm
–

Multi-colour logos keep their colours

No colors attribute here, and the SVG has a viewBox but no width or height. Re-forming is set to firm and the stir radius is wider.

<liquid-logo src="low-tide-radio.svg" restore="firm" radius="1.4" label="Low Tide Radio"></liquid-logo>
  1. 01

    Scrolling

    The element sets touch-action: pan-y, so a vertical swipe that starts on a logo still scrolls the page.

  2. 02

    Off screen

    An IntersectionObserver pauses the loop when a logo leaves the screen. The panel in the corner shows all three at once.

  3. 03

    Hidden tab

    Switch tabs and every loop pauses; come back and they carry on.

  4. 04

    Settled

    Leave a logo alone and its loop stops a few seconds after it has re-formed. The frame count stops with it.

  5. 05

    Keyboard

    Tab to a logo. Arrow keys push the ink from the middle; Space sends a burst.

03 · On a dark panel, capture="all"
– 
<liquid-logo src="harbour-static-mark.svg" colors="#ffffff,#F2B134" capture="all" force="1.5" label="Harbour Static, on dark"></liquid-logo>

This one takes every touch, so a swipe that starts on it never scrolls. That is right for a full-screen page and wrong for most embeds, which is why it is not the default. The canvas is transparent, so the panel's colour shows through.