const P = Pencil;

const scene = new P.Scene();

const text = new P.Text([30, 10], "Pencil.js", {
    font: "//fonts.gstatic.com/s/courgette/v5/wEO_EBrAnc9BLjLQAUk1VvoK.woff2",
    fontSize: 100,
});
const square = new P.Square([-10, 15], 80, {
    fill: "red",
    opacity: 0.5,
    rotationAnchor: [40, 40],
    zIndex: -1,
});
const circle = new P.Circle([180, 80], 40, {
    fill: "blue",
    opacity: 0.5,
    zIndex: -1,
});
const star = new P.Star([300, 40], 50, 6, 0.6, {
    fill: "gold",
    opacity: 0.6,
    zIndex: -1,
});
text.add(square, circle, star);
scene.add(text);

text.on("ready", () => {
    scene.startLoop();
});

scene.on("draw", () => {
    square.options.rotation = scene.frameCount / 600;
    circle.radius = 40 + (8 * Math.cos(scene.frameCount / 30));
    star.position.add(Math.cos(scene.frameCount / 10), Math.sin(scene.frameCount / 20));
}, true);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/pencil.js@0.8.1/dist/pencil.min.js