# Shapes & strokes

> Every shape SilkGraphics draws, how to stroke and dash it, and how to combine shapes.

Source: https://pixi-silk.schmooky.dev/docs/shapes-and-strokes/

One primitive family per page. Read shapes first: the other pages build on its fill and stroke calls.

## 01. Shapes

Rects and squircles with per-corner radii, circles, ellipses, polygons, stars, arcs, rings and sectors, plus the transform stack that rotates them.

Guide: https://pixi-silk.schmooky.dev/docs/shapes/

Experiments:

- [Primitives](https://pixi-silk.schmooky.dev/lab/01-primitives/): Every shape kind side by side: rects, squircles, circles, arcs, sectors, lines, areas, dashes, icons and blur.
- [Rounded rects & squircles](https://pixi-silk.schmooky.dev/lab/07-rounded-rects/): Per-corner radii and continuous-curvature corners. Drag the smoothing slider to move from a circular corner to a squircle.
- [Icons](https://pixi-silk.schmooky.dev/lab/11-icons/): Sixteen glyphs built from primitives with save and translateTransform, drawn at 16, 28 and 56 px.

## 02. Lines & paths

Lines and polylines with monotone or Catmull-Rom smoothing, miter, bevel and round joins, Bezier and SVG paths that fill and stroke, and tapered strokes.

Guide: https://pixi-silk.schmooky.dev/docs/lines-and-paths/

## 03. Strokes & dashes

Paint styles for fill() and stroke(), inside or outside stroke alignment, hairlines that fade instead of breaking up, and dashes and dots with caps.

Guide: https://pixi-silk.schmooky.dev/docs/strokes-and-dashes/

## 04. Shape operations

Union, subtract, intersect and exclude shapes and SVG paths in PixiJS with fill({ op }) and boolean(). Results take strokes, gradients, blur and hit tests.

Guide: https://pixi-silk.schmooky.dev/docs/shape-operations/