RHS

  const geometryGroup = scene.geometry.group();
  const dimensionsGroup = scene.dimensions.group();

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

  const dimensionOverflow = 15;
  const dimensionOffset = 30;

  scene.draw((p) => {
    const {
      width: outerWidth,
      height: outerHeight,
      thickness,
      innerRadius,
      outerRadius,
    } = p;

    const innerWidth = outerWidth - 2 * thickness;
    const innerHeight = outerHeight - 2 * thickness;

    const path = geometryGroup.path({ stroke: blueStroke, fill: blueFillId });

    path
      // outer rectangle
      .moveToAbs(-outerWidth / 2, 0)
      .lineTo(0, outerHeight / 2 - outerRadius)
      .arcTo(outerRadius, outerRadius, outerRadius, true)
      .lineTo(outerWidth - outerRadius * 2, 0)
      .arcTo(outerRadius, -outerRadius, outerRadius, true)
      .lineTo(0, -(outerHeight - outerRadius * 2))
      .arcTo(-outerRadius, -outerRadius, outerRadius, true)
      .lineTo(-(outerWidth - outerRadius * 2), 0)
      .arcTo(-outerRadius, outerRadius, outerRadius, true)
      .lineTo(0, outerHeight / 2 - outerRadius)
      // inner rectangle
      .moveToAbs(-innerWidth / 2, 0)
      .lineTo(0, innerHeight / 2 - innerRadius)
      .arcTo(innerRadius, innerRadius, innerRadius, true)
      .lineTo(innerWidth - innerRadius * 2, 0)
      .arcTo(innerRadius, -innerRadius, innerRadius, true)
      .lineTo(0, -(innerHeight - innerRadius * 2))
      .arcTo(-innerRadius, -innerRadius, innerRadius, true)
      .lineTo(-(innerWidth - innerRadius * 2), 0)
      .arcTo(-innerRadius, innerRadius, innerRadius, true)
      .lineTo(0, innerHeight / 2 - innerRadius)
      .close();

    const dimensions = dimensionsGroup.dimension();

    // width
    dimensions
      .moveToAbs(-outerWidth / 2, -outerHeight / 2 - dimensionOffset)
      .tick(0)
      .lineTo(outerWidth, 0)
      .tick(0)
      .textAt(-outerWidth / 2, -15, `${outerWidth}mm`, "middle");

    // height
    dimensions
      .moveToAbs(outerWidth / 2 + dimensionOffset, -outerHeight / 2)
      .tick(-Math.PI / 2)
      .lineTo(0, outerHeight)
      .tick(Math.PI / 2)
      .textAt(10, -outerHeight / 2, `${outerHeight}mm`, "start");

    // thickness
    dimensions
      .moveToAbs(-outerWidth / 2 - dimensionOverflow, 15)
      .lineTo(dimensionOverflow, 0)
      .tick(0)
      .moveTo(thickness, 0)
      .tick(0)
      .lineTo(dimensionOverflow * 2, 0)
      .textAt(5, 0, `${thickness}mm`, "start");
  });