Halo — a ring that breathes

A halo is an additive ring plus two tiny motions: a scale "breath" of about ±3% on a slow sine, and an alpha shimmer from cheap noise (two sines that never line up). That's the entire recipe — the same one behind auras, selection rings, and save-point circles. Only colour and speed change.

let BREATH = 0.03;    // ±3% scale — the "it is alive" number
let PERIOD = 3;       // seconds per breath
let HUE = "255, 214, 120";   // halo colour (gold), as "r, g, b"

onFrame((dt, t) => {
  ctx.clearRect(0, 0, W, H);
  const cx = W / 2, cy = H * 0.62;

// the subject: a humble pebble-person (any sprite goes here)
  ctx.fillStyle = "#4A4368";
  ctx.beginPath(); ctx.ellipse(cx, cy, 34, 44, 0, 0, 7); ctx.fill();
  ctx.beginPath(); ctx.arc(cx, cy - 62, 22, 0, 7); ctx.fill();

// ---- the halo ----
  ctx.globalCompositeOperation = "lighter";   // additive: light adds up

// motion 1: the breath (±3% scale on a slow sine)
  const s = 1 + BREATH * Math.sin(t * Math.PI * 2 / PERIOD);
  // motion 2: the shimmer (two sines at odd speeds ≈ cheap noise)
  const shimmer = 0.62 + 0.18 * Math.sin(t * 1.7) + 0.1 * Math.sin(t * 4.3 + 1);

const rx = 34 * s, ry = 10 * s;             // squashed = floats above
  const hy = cy - 96;                         // halo height

// soft under-glow disc, then the crisp ring on top
  const glow = ctx.createRadialGradient(cx, hy, 2, cx, hy, rx * 2.1);
  glow.addColorStop(0, "rgba(" + HUE + "," + 0.25 * shimmer + ")");
  glow.addColorStop(1, "rgba(" + HUE + ",0)");
  ctx.fillStyle = glow;
  ctx.beginPath(); ctx.arc(cx, hy, rx * 2.1, 0, 7); ctx.fill();

ctx.strokeStyle = "rgba(" + HUE + "," + shimmer + ")";
  ctx.lineWidth = 5;
  ctx.beginPath(); ctx.ellipse(cx, hy, rx, ry, 0, 0, 7); ctx.stroke();

// one spark slowly orbiting the rim (rotation you can actually see)
  const a = t * 0.9;
  ctx.fillStyle = "rgba(255,255,255," + shimmer + ")";
  ctx.beginPath();
  ctx.arc(cx + Math.cos(a) * rx, hy + Math.sin(a) * ry, 2.4, 0, 7);
  ctx.fill();

ctx.globalCompositeOperation = "source-over";
});

Cover the halo with your thumb and the pebble is just a pebble. The ±3% breath is doing more work than any other number on this page — it's the difference between a drawing of a ring and a presence.

Try tweaking: HUE to "140, 230, 255" (spirit) or "255, 120, 120" (cursed) · BREATH 0.03 → 0.15 (excited pulse — notice it stops feeling holy) · PERIOD 3 → 0.8 (alarm ring) · drop the halo to cy and flatten ry to 6: a selection ring at the feet.

In Godot: an additive-blend ring sprite (CanvasItemMaterial → Add), scale on a 3 s sine — download halo.gd, which even paints the ring texture pixel-by-pixel from code. In Unity: a ring sprite with an additive material, scale + alpha from a looping tween (or one Animator curve). In Unreal: an additive material on a widget or plane; drive scale/opacity with a Timeline. On the web (DOM): a CSS radial-gradient ring with mix-blend-mode: screen and a keyframed scale. Chapter 06.