CHS

  const geometryGroup = scene.geometry.group();
  const dimensionsGroup = scene.dimensions.group();
  const TEAL = "#0f766e";
  const tealFillId = scene.addHatchFill(TEAL);
  const tealStroke = TEAL;

  const radiusDimensionAngle = Math.PI / 4; // 45deg
  const centerMarkSize = 15;
  const dimensionOverflow = 15;
  const thicknessDimensionAngle = -Math.PI / 4; // -45deg

  scene.draw((p) => {
    const { radius: outerRadius, thickness } = p;
    const innerRadius = outerRadius - thickness;

    const path = geometryGroup.path({ stroke: tealStroke, fill: tealFillId });

    // a single arcTo can create a circle with the help of a very small displacement (epsilon) and lareArc = true
    // it looks and behaves like a circle but a perfect one can only be produced by 2 or more arcs
    path
      // outer circle
      .moveToAbs(-outerRadius, 0)
      .arcTo(0, -Number.EPSILON, outerRadius, true, true)
      // inner circle
      .moveToAbs(-innerRadius, 0)
      .arcTo(0, -Number.EPSILON, innerRadius, true, true)
      .close();

    const dimensions = dimensionsGroup.dimension();
    const radiusDirX = Math.cos(radiusDimensionAngle);
    const radiusDirY = Math.sin(radiusDimensionAngle);

    // radius dimension
    dimensions
      .centerMark(centerMarkSize)
      .lineTo(outerRadius * radiusDirX, outerRadius * radiusDirY)
      .arrowFilled(radiusDimensionAngle)
      .moveToAbs(
        (innerRadius / 2) * radiusDirX,
        (innerRadius / 2) * radiusDirY,
      )
      .textAt(-5, 5, `${outerRadius}mm`, "end");

    // wall thickness dimension
    const thicknessDirX = Math.cos(thicknessDimensionAngle);
    const thicknessDirY = Math.sin(thicknessDimensionAngle);
    dimensions
      .moveToAbs(
        (innerRadius - dimensionOverflow) * thicknessDirX,
        (innerRadius - dimensionOverflow) * thicknessDirY,
      )
      .lineTo(
        dimensionOverflow * thicknessDirX,
        dimensionOverflow * thicknessDirY,
      )
      .tick(thicknessDimensionAngle)
      .moveTo(thickness * thicknessDirX, thickness * thicknessDirY)
      .tick(thicknessDimensionAngle)
      .lineTo(
        dimensionOverflow * thicknessDirX,
        dimensionOverflow * thicknessDirY,
      )
      .lineTo(dimensionOverflow * 2, 0)
      .textAt(5, 0, `${thickness}mm`, "start");
  });