.circle {
    --width: 300px;

    width: var(--width);
    height: var(--width);

    border-radius: 50%;
    border: 1px solid black;

    position: relative;
  }

  .point {
    --angle: 0deg;
    --point-size: 5ch;

    /* we subtract the point size to place point inside circle */
    --radius: calc((var(--width) / 2) - (var(--point-size) / 2) - 1px);

    --x: calc(var(--radius) * cos(var(--angle)));
    --y: calc(var(--radius) * sin(var(--angle)));

    /* position point at center of circle with radius. We add x and y values to move to edge of circle. */
    position: absolute;
    top: calc(var(--radius) + var(--y));
    left: calc(var(--radius) + var(--x));

    background-color: red;
    width: var(--point-size);
    height: var(--point-size);
    border-radius: 50%;
  }