The Complete Production SOP: How to Deploy and Run Two.js Renderer-Agnostic 2D Drawing in Autonomous AI Agents

---
name: "twojs-renderer-agnostic-shapes"
description: "Write once and render 2D vector scenes across SVG, Canvas 2D, and WebGL with Two.js."
metadata:
  author: "Jono Brandel"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "draw shapes with two.js"
  - "switch two.js renderer webgl canvas"
  - "animate two.js group"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import Two from 'two.js';

export interface RendererConfig {
  container: HTMLElement;
  type: Two.Types;
  width: number;
  height: number;
}

export function initTwoScene(config: RendererConfig): Two {
  const two = new Two({
    type: config.type,
    width: config.width,
    height: config.height,
    autostart: false
  }).appendTo(config.container);
  return two;
}

import Two from 'two.js';

export class SolarSystemScene {
  private two: Two;
  private systemGroup: Two.Group;

  constructor(container: HTMLElement, rendererType: Two.Types = Two.Types.canvas) {
    this.two = new Two({
      type: rendererType,
      width: 800,
      height: 600
    }).appendTo(container);

    this.systemGroup = this.two.makeGroup();
    this.buildScene();
  }

  private buildScene(): void {
    const sun = this.two.makeCircle(400, 300, 40);
    sun.fill = '#FFA500';
    sun.noStroke();

    const planetOrbit = this.two.makeGroup();
    planetOrbit.translation.set(400, 300);

    const planet = this.two.makeCircle(120, 0, 15);
    planet.fill = '#00BFFF';
    planet.noStroke();

    planetOrbit.add(planet);
    this.systemGroup.add(sun, planetOrbit);

    this.two.bind('update', () => {
      planetOrbit.rotation += 0.02;
    });
  }

  public start(): void {
    this.two.play();
  }
}

import { describe, it, expect, beforeEach } from 'vitest';
import Two from 'two.js';

describe('Two.js Renderer Independence', () => {
  let container: HTMLElement;

  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  it('creates elements across Canvas, SVG, and WebGL backends', () => {
    [Two.Types.svg, Two.Types.canvas, Two.Types.webgl].forEach((backend) => {
      const two = new Two({ type: backend, width: 200, height: 200 }).appendTo(container);
      const rect = two.makeRectangle(50, 50, 20, 20);
      two.update();
      expect(two.scene.children.length).toBe(1);
      expect(rect.id).toBeDefined();
      two.clear();
      two.renderer.domElement.remove();
    });
  });
});