My pattern library

Creates a polar canvas according to the following inputs:

• --line-width: width of the grid lines,
• --canvas-radius-em: multiplied by 1em is approximately the radius of the canvas,
• --n-radial-lines: number of grid lines in the radial direction,
• --grid-color: the color of the grid lines.

Note: The number of grid lines in the circumferential direction is 6 (or 3, depending how you look at it), and cannot be changed, because each line corresponds to a separate linear-gradient.

Note: The rule overflow: hidden; is used to prevent some nasty effects. Specifically, since the diagrams are drawn via triangles, and since triangles are rendered as rectangles with 100% transpacenty on one side of a diagonal, it can happen that the transparent half of the rectangles protrudes beyond the elements borders, which can cause the appearance of an horizontal scroll bar.

Note: The rule position: relative; is set to allow precise positioning of elements on top of the canvas.