Basic Shapes

  const geometryGroup = scene.geometry.group();
  const SHAPE_GAP_SCALE = 1.5;

  const BLUE = "#2563eb";
  const blueFillId = scene.addHatchFill(BLUE);
  const blueStroke = BLUE;

  const TEAL = "#0f766e";
  const tealFillId = scene.addHatchFill(TEAL);
  const tealStroke = TEAL;

  const ORANGE = "#ea580c";
  const orangeFillId = scene.addHatchFill(ORANGE);
  const orangeStroke = ORANGE;

  scene.draw((p) => {
    const { size } = p;
    const halfShapeSize = size / 2;
    const horizontalGap = size * SHAPE_GAP_SCALE;

    // triangle
    geometryGroup
      .path({ stroke: blueStroke, fill: blueFillId })
      .moveToAbs(-horizontalGap, halfShapeSize)
      .lineToAbs(-horizontalGap + halfShapeSize, -halfShapeSize)
      .lineToAbs(-horizontalGap - halfShapeSize, -halfShapeSize)
      .close();

    // square
    geometryGroup
      .path({ stroke: tealStroke, fill: tealFillId })
      .moveToAbs(-halfShapeSize, -halfShapeSize)
      .lineTo(size, 0)
      .lineTo(0, size)
      .lineTo(-size, 0)
      .close();

    // diamond
    geometryGroup
      .path({ stroke: orangeStroke, fill: orangeFillId })
      .moveToAbs(horizontalGap, halfShapeSize)
      .lineToAbs(horizontalGap + halfShapeSize, 0)
      .lineToAbs(horizontalGap, -halfShapeSize)
      .lineToAbs(horizontalGap - halfShapeSize, 0)
      .close();
  });