css-doodle

Create

Function

@arc

The path data of an arc, M … A …, for a path d. Angles are degrees clockwise from three o'clock, like SVG rotate().

Syntax

  • @arc(r: <rx> [<ry>]; from: <angle>; to: <angle>; move: <x> [<y>])
r
One radius, or two for an ellipse. Defaults to 0.
from
Start angle. Defaults to 0 (three o'clock).
to
End angle. Defaults to 360, a full circle drawn as two arcs.
move
The center. One value sets both axes. Defaults to the origin.

A sweep of a full turn or more is the whole circle. When to is less than from the arc is counter-clockwise. Angles take deg, rad, grad or turn. The data ends at the arc's end, so @arc(…) L 0 0 Z is a pie slice.

Examples

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 100;
  path {
    d: @arc(r: 36; from: 0; to: 180; move: 50 50);
    fill: none;
    stroke: #000;
    stroke-width: 6;
    stroke-linecap: round;
  }
);
Open in playground

A line back to the center closes a pie:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: -50 -50 100 100;
  path {
    d: @arc(r: 40; from: -40; to: 40) L 0 0 Z;
    fill: #000;
  }
);
Open in playground

Two radii draw an ellipse:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 100;
  path {
    d: @arc(r: 40 22; from: 0; to: 270; move: 50 50);
    fill: none;
    stroke: #000;
    stroke-width: 5;
  }
);
Open in playground

See also