Ghost of Tsushima

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

  const GRAY = "#a5a5a5";
  const grayFillId = scene.addHatchFill(GRAY);
  const grayStroke = GRAY;

  const RED = "#a40000";
  const redFillId = scene.addHatchFill(RED, 0.5);
  const redStroke = RED;

  const dimensionsOffset = 30;

  scene.draw((p) => {
    const { radius } = p;

    const scaleFactor = radius / initialRadius;
    geometryGroup.scale(scaleFactor, scaleFactor);

    const thickness = initialRadius / 5;
    const outerRadius = initialRadius;
    const innerRadius = initialRadius - thickness;

    const ringPath = geometryGroup.path({
      stroke: grayStroke,
      fill: grayFillId,
    });

    ringPath
      // outer circle
      .moveToAbs(-outerRadius, 0)
      .arcTo(outerRadius * 2, 0, outerRadius, true)
      .arcTo(-outerRadius * 2, 0, outerRadius, true)
      // inner circle
      .moveToAbs(-innerRadius, 0)
      .arcTo(innerRadius * 2, 0, innerRadius, true)
      .arcTo(-innerRadius * 2, 0, innerRadius, true)
      .close();

    const polygonsPath = geometryGroup.path({
      stroke: redStroke,
      fill: redFillId,
    });

    const baseWidth = (initialRadius / 2.5) * 2;

    polygonsPath
      // bottom triangle
      .moveToAbs(-baseWidth / 2, (-baseWidth / 2) * 0.75)
      .lineTo(baseWidth / 2, baseWidth / 2)
      .lineTo(baseWidth / 2, -baseWidth / 2)
      .lineTo(-baseWidth, 0)
      // top triangle
      .moveToAbs(-baseWidth / 2, 0)
      .lineTo(baseWidth / 2, baseWidth / 2)
      .lineTo(baseWidth / 2, -baseWidth / 2)
      .lineTo((-baseWidth / 2) * 0.6, 0)
      .lineTo((-baseWidth / 2) * 0.4, (baseWidth / 2) * 0.4)
      .lineTo((-baseWidth / 2) * 0.4, (-baseWidth / 2) * 0.4)
      .close();

    const dimensions = dimensionsGroup.dimension();
    dimensions
      .moveToAbs(radius + dimensionsOffset, -radius)
      .tick(Math.PI / 2)
      .lineTo(0, radius * 2)
      .tick(Math.PI / 2)
      .textAt(5, -radius, `Ø ${radius}mm`, "start")

      // title
      .moveToAbs(0, 0)
      .textAtAbs(
        0,
        200,
        `"Honor died on the beach" - Jin Sakai`,
        "middle",
        "title",
      );
  });