Static vs Dynamic

  const ORANGE = "#f97316";
  const TEAL = "#0f766e";

  const staticGroup = scene.geometry.group();
  staticGroup.setDrawUsage("static");

  const dynamicGroup = scene.geometry.group();

  const orangeFillId = scene.addHatchFill(ORANGE);
  const orangeStroke = ORANGE;
  const tealFillId = scene.addHatchFill(TEAL);
  const tealStroke = TEAL;

  scene.draw((p) => {
    const { size } = p;

    staticGroup
      .path({ stroke: orangeStroke, fill: orangeFillId })
      .moveToAbs(-size / 2 - SHAPE_HORIZONTAL_OFFSET, -size / 2)
      .lineTo(size, 0)
      .lineTo(0, size)
      .lineTo(-size, 0)
      .close();

    dynamicGroup
      .path({ stroke: tealStroke, fill: tealFillId })
      .moveToAbs(-size / 2 + SHAPE_HORIZONTAL_OFFSET, -size / 2)
      .lineTo(size, 0)
      .lineTo(0, size)
      .lineTo(-size, 0)
      .close();
  });