Pencil.js animated logo

animated-logo.js

const P = Pencil;

const scene = new P.Scene();

const size = 200;
const mini = false;
const text = new P.Text([size * 0.4, size * 0.2], mini ? "P" : "Pencil.js", {
    font: "//fonts.gstatic.com/s/courgette/v5/wEO_EBrAnc9BLjLQAUk1VvoK.woff2",
    fontSize: size,
});
const square = new P.Square([size * 0.25, size * 0.4], size * 0.8, {
    fill: "red",
    opacity: 0.5,
    origin: "center",
    zIndex: -1,
});
const circle = new P.Circle([size * 1.8, size * 0.7], size * 0.4, {
    fill: "blue",
    opacity: 0.5,
    zIndex: -1,
});
const star = new P.Star([size * 3, size * 0.5], size * 0.5, 5, 0.55, {
    fill: "gold",
    opacity: 0.6,
    zIndex: -1,
});
text.add(...[square].concat(mini ? [] : [circle, star]));
scene.add(text);

text.on("ready", () => {
    // const img = scene.toImage([[0, 0], [size * (mini ? 1.25 : 4.05), size * (mini ? 1.25 : 1.45)]]);
    // document.body.innerHTML = "";
    // document.body.appendChild(img);

    scene.startLoop();
});

scene.on("draw", () => {
    const offset = (scene.frameCount + 30) / 500;
    square.options.rotation = offset;
    circle.radius = (size * 0.4) + P.Math.map(Math.cos(offset * 4 * P.Math.radianCircle), -1, 1, 0, size * 0.1);
    star.options.origin.set(
        Math.sin((offset + 0.25) * P.Math.radianCircle * 4) * (size * 0.1),
        Math.cos((offset + 0.25) * P.Math.radianCircle * 2) * (size * 0.2),
    );
}, true);