Filters

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

const ROSE = "#e11d48";
const roseFillId = scene.addHatchFill(ROSE);
const roseStroke = ROSE;
const dimensionsOffset = 28;
const starStartAngle = Math.PI / 2;

scene.draw((p) => {
  const { size: outerRadius, points, innerRadiusRatio } = p;
  const innerRadius = outerRadius * innerRadiusRatio;
  const pointCount = Math.max(3, Math.floor(points));
  const step = Math.PI / pointCount;

  const path = geometryGroup.path({ stroke: roseStroke, fill: roseFillId });
  const startX = outerRadius * Math.cos(starStartAngle);
  const startY = outerRadius * Math.sin(starStartAngle);

  path.moveToAbs(startX, startY);

  let previousX = startX;
  let previousY = startY;

  for (let vertexIndex = 1; vertexIndex < pointCount * 2; vertexIndex++) {
    const isOuterPoint = vertexIndex % 2 === 0;
    const pointRadius = isOuterPoint ? outerRadius : innerRadius;
    const pointAngle = starStartAngle + step * vertexIndex;
    const pointX = pointRadius * Math.cos(pointAngle);
    const pointY = pointRadius * Math.sin(pointAngle);

    path.lineTo(pointX - previousX, pointY - previousY);

    previousX = pointX;
    previousY = pointY;
  }

  path.close();

  dimensionsGroup
    .dimension()
    .moveToAbs(-outerRadius, outerRadius + dimensionsOffset)
    .arrow(Math.PI)
    .lineTo(outerRadius * 2, 0)
    .arrow(0)
    .textAt(-outerRadius, 10, `${outerRadius * 2}mm`);

  dimensionsGroup
    .dimension()
    .moveToAbs(outerRadius + dimensionsOffset, -outerRadius)
    .arrow(-Math.PI / 2)
    .lineTo(0, outerRadius * 2)
    .arrow(Math.PI / 2)
    .textAt(10, -outerRadius, `${outerRadius * 2}mm`, "start");
});