https://seeft.io/animations/seeft-logo.js

1/** Vector reconstruction of the 205-frame, 4.1-second Seeft reference GIFs. */
2export const SEEFT_LOGO_DURATION = 4100;
3
4const NS = 'http://www.w3.org/2000/svg';
5const COLORS = {
6  auto: ['var(--seeft-logo-color, #008080)', 'var(--seeft-logo-shadow, #013534)'],
7  light: ['#008080', '#013534'],
8  dark: ['#ffffff', '#b9b9b9'],
9};
10
11// Time in original GIF frames, angle, top/middle/bottom segment centres.
12const TURN = [
13  [0, -90, 189.5, 232.5, 275.5],
14  [10, -90, 189.5, 232.5, 275.5],
15  [15, -82.9, 189, 238, 279],
16  [20, -61, 184.5, 244, 291.5],
17  [25, -39.13, 178, 246.5, 304.7],
18  [30, -17.2, 172.8, 246.5, 317.6],
19  [35, 0, 169.5, 247, 328.5],
20];
21const OPEN = [
22  [50, 0], [55, 1], [60, 8], [65, 19], [70, 35], [75, 52],
23  [80, 69], [85, 85], [90, 99], [95, 108], [100, 111],
24];
25
26function sample(points, frame) {
27  const end = points.findIndex((point) => point[0] >= frame);
28  if (end <= 0) return (end === 0 ? points[0] : points[points.length - 1]).slice(1);
29  const a = points[end - 1];
30  const b = points[end];
31  const progress = (frame - a[0]) / (b[0] - a[0]);
32  return a.slice(1).map((value, index) => value + (b[index + 1] - value) * progress);
33}
34
35function smooth(start, end, value) {
36  const t = Math.max(0, Math.min(1, (value - start) / (end - start)));
37  return t * t * (3 - 2 * t);
38}
39
40// Only the upper right corner is rounded, as in the supplied logo.
41function ribbon(x, y, height, radius) {
42  return `M${x},${y}H${x + 112 - radius}Q${x + 112},${y} ${x + 112},${y + radius}V${y + height}H${x}Z`;
43}
44
45/**
46 * Mount a transparent SVG logo. No GIFs, canvas, dependencies or network requests.
47 * `dark` is the white logo for dark surfaces; `light` is the teal logo.
48 *
49 * @param {HTMLElement} container
50 * @param {{variant?: 'light' | 'dark' | 'auto', duration?: number, autoplay?: boolean,
51 * loop?: boolean, label?: string, framing?: 'original' | 'compact'}} [options]
52 */
53export function createSeeftLogo(container, options = {}) {
54  const {
55    variant = 'light', duration = SEEFT_LOGO_DURATION, autoplay = true,
56    loop = true, label = 'Seeft', framing = 'original',
57  } = options;
58  if (!Number.isFinite(duration) || duration <= 0) throw new RangeError('duration must be positive');
59
60  const svg = document.createElementNS(NS, 'svg');
61  svg.setAttribute('viewBox', framing === 'compact' ? '260 115 260 255' : '0 0 920 518');
62  svg.setAttribute('role', 'img');
63  svg.setAttribute('aria-label', label);
64  svg.style.cssText = 'display:block;width:100%;height:auto;overflow:visible';
65
66  const rows = Array.from({ length: 3 }, () => {
67    const group = document.createElementNS(NS, 'g');
68    const shadow = document.createElementNS(NS, 'path');
69    const back = document.createElementNS(NS, 'path');
70    const front = document.createElementNS(NS, 'path');
71    group.append(shadow, back, front);
72    svg.append(group);
73    return { group, shadow, back, front };
74  });
75  container.append(svg);
76
77  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
78  let time = 0;
79  let playing = autoplay;
80  let request = 0;
81  let previous = null;
82  let destroyed = false;
83  let rate = 1;
84
85  function render() {
86    // The return movement mirrors the opening, with a short hold at full width.
87    const rawFrame = reducedMotion.matches ? 100 : time / duration * 205;
88    const frame = Math.min(100, rawFrame <= 102.5 ? rawFrame : 205 - rawFrame);

89    const [angle, ...centres] = sample(TURN, frame);
90    const [spread] = sample(OPEN, frame);
91    const lift = 15 * smooth(35, 55, frame);
92    const radius = 1.5 + 13.5 * smooth(55, 75, frame);
93    const fold = smooth(80, 83, frame);
94
95    rows.forEach(({ group, shadow, back, front }, index) => {
96      const height = index === 1 ? 38 : 39;
97      const y = centres[index] - height / 2;
98      group.setAttribute('transform', `rotate(${angle} 443 ${centres[index]})`);
99      back.setAttribute('d', ribbon(387, y, height, radius));
100      front.setAttribute('d', ribbon(387 - spread, y - lift, height, radius));
101      shadow.setAttribute('d', `M${387 - spread + 32},${y - lift + height}H387V${y + height}Z`);
102      shadow.setAttribute('opacity', String(fold));
103    });
104  }
105
106  function setVariant(next) {
107    const [main, shadowColor] = COLORS[next] || COLORS.light;
108    rows.forEach(({ front, back, shadow }) => {
109      front.setAttribute('fill', main);
110      back.setAttribute('fill', main);
111      shadow.setAttribute('fill', shadowColor);
112    });
113  }
114
115  function stopFrame() {
116    cancelAnimationFrame(request);
117    request = 0;
118    previous = null;
119  }
120
121  function schedule() {
122    if (!destroyed && playing && !document.hidden && !reducedMotion.matches && !request) {
123      request = requestAnimationFrame(tick);
124    }
125  }
126
127  function tick(now) {
128    request = 0;
129    if (previous !== null) time += (now - previous) * rate;
130    previous = now;
131    if (time >= duration) {
132      time = loop ? time % duration : duration;
133      if (!loop) playing = false;
134    }
135    render();
136    schedule();
137  }
138
139  function refresh() {
140    stopFrame();
141    render();
142    schedule();
143  }
144
145  setVariant(variant);
146  render();
147  schedule();
148  reducedMotion.addEventListener('change', refresh);
149  document.addEventListener('visibilitychange', refresh);
150
151  return {
152    svg,
153    get currentTime() { return time; },
154    get isPlaying() { return playing; },
155    play() {
156      if (time >= duration) time = 0;
157      playing = true;
158      schedule();
159    },
160    pause() { playing = false; stopFrame(); },
161    restart() { time = 0; playing = true; refresh(); },
162    /** @param {number} milliseconds */
163    seek(milliseconds) {
164      if (!Number.isFinite(milliseconds)) return;
165      time = Math.max(0, Math.min(duration, milliseconds));
166      refresh();
167    },
168    /** @param {number} value */
169    setPlaybackRate(value) {
170      if (!Number.isFinite(value) || value <= 0) throw new RangeError('Playback rate must be positive');
171      rate = value;
172      previous = null;
173    },
174    setVariant,
175    destroy() {
176      destroyed = true;
177      playing = false;
178      stopFrame();
179      reducedMotion.removeEventListener('change', refresh);
180      document.removeEventListener('visibilitychange', refresh);
181      svg.remove();
182    },
183  };
184}