Pencil Filter

  const geometryGroup = scene.geometry.group();
  scene.enableFilter(true);
  scene.setFilterIntensity(filterIntensity); // reactive state

  const ROSE = "#e11d48";
  const roseFillId = scene.addHatchFill(ROSE);
  const roseStroke = ROSE;

  const starStartAngle = Math.PI / 2;
  scene.draw((p) => {
    const { size, points, innerRadiusRatio } = p;
    const path = geometryGroup.path({
      stroke: roseStroke,
      fill: roseFillId,
    });
    const pointCount = Math.max(3, Math.floor(points));
    const step = Math.PI / pointCount;
    const outerRadius = size;
    const innerRadius = size * innerRadiusRatio;
    const startX = outerRadius * Math.cos(starStartAngle);
    const startY = outerRadius * Math.sin(starStartAngle);

    // outer point 1
    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;
    }

    // close the star
    path.close();
  });