// p5 Logo — Instance Mode

const logo = function(p) {
  let angle = 0;
  let hovering = false;

  p.setup = function() {
    let canvas = p.createCanvas(52, 52);
    canvas.mouseOver(() => { hovering = true; });
    canvas.mouseOut(() => { hovering = false; });
  };

  p.draw = function() {
    p.clear();
    p.translate(26, 26);

    if (hovering) angle += 0.08;

    p.rotate(angle);
    p.noStroke();
    p.fill(200, 30, 70);
    p.circle(0, 0, 46);
    p.fill(120, 10, 40);
    p.circle(-5, -7, 8);
    p.circle(5, -7, 8);
    p.circle(0, 4, 8);
  };
};

new p5(logo, document.getElementById('logo-sketch'));

// HTML

<nav>
  <div id="logo-sketch"></div>
  <span>Site Name</span>
</nav>

// Key points

// clear()  → transparent background
// canvas.mouseOver / canvas.mouseOut → hover interaction
// Small canvas (52×52) fits in a navbar