红尘
d73ff9b0fb
Deploy Site / deploy-vercel (push) Has been cancelled
Deploy Site / deploy-docs (push) Has been cancelled
Docker / shell lint / Lint Dockerfile (hadolint) (push) Has been cancelled
Docker / shell lint / Lint docker/ shell scripts (shellcheck) (push) Has been cancelled
Docker Build and Publish / build-amd64 (push) Has been cancelled
Docker Build and Publish / build-arm64 (push) Has been cancelled
Lint (ruff + ty) / ruff + ty diff (push) Has been cancelled
Lint (ruff + ty) / ruff enforcement (blocking) (push) Has been cancelled
Lint (ruff + ty) / Windows footguns (blocking) (push) Has been cancelled
Nix Lockfile Fix / auto-fix-main (push) Has been cancelled
Nix Lockfile Fix / fix (push) Has been cancelled
Nix / nix (macos-latest) (push) Has been cancelled
Nix / nix (ubuntu-latest) (push) Has been cancelled
OSV-Scanner / Scan lockfiles (push) Has been cancelled
Build Skills Index / build-index (push) Has been cancelled
Tests / test (1) (push) Has been cancelled
Tests / test (2) (push) Has been cancelled
Tests / test (3) (push) Has been cancelled
Tests / test (4) (push) Has been cancelled
Tests / test (5) (push) Has been cancelled
Tests / test (6) (push) Has been cancelled
Tests / e2e (push) Has been cancelled
uv.lock check / uv lock --check (push) Has been cancelled
Docker Build and Publish / merge (push) Has been cancelled
Build Skills Index / trigger-deploy (push) Has been cancelled
Tests / save-durations (push) Has been cancelled
43 lines
2.0 KiB
Markdown
43 lines
2.0 KiB
Markdown
# Physical Shape Cookbook
|
|
|
|
Guidance for drawing physical objects (vehicles, buildings, hardware, mechanical systems, anatomy) — when rectangles aren't enough.
|
|
|
|
## Shape selection
|
|
|
|
| Physical form | SVG element | Example use |
|
|
|---------------|-------------|-------------|
|
|
| Curved bodies | `<path>` with Q/C curves | Fuselage, tanks, pipes |
|
|
| Tapered/angular shapes | `<polygon>` | Wings, fins, wedges |
|
|
| Cylindrical/round | `<ellipse>`, `<circle>` | Engines, wheels, buttons |
|
|
| Linear structures | `<line>` | Struts, beams, connections |
|
|
| Internal sections | `<rect>` inside parent | Compartments, rooms |
|
|
| Dashed boundaries | `stroke-dasharray` | Hidden parts, fuel tanks |
|
|
|
|
## Layering approach
|
|
|
|
1. Draw outer structure first (fuselage, frame, hull)
|
|
2. Add internal sections on top (cabins, compartments)
|
|
3. Add detail elements (engines, wheels, controls)
|
|
4. Add leader lines with labels
|
|
|
|
## Semantic CSS classes (instead of c-* ramps)
|
|
|
|
For physical diagrams, define component-specific classes directly rather than applying `c-*` color classes. This makes each part self-documenting and lets you keep a restrained palette:
|
|
|
|
```css
|
|
.fuselage { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
|
|
.wing { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
|
|
.engine { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
|
|
```
|
|
|
|
Add these to a local `<style>` inside the SVG (or extend the host page's `<style>` block). The light-mode/dark-mode pattern still works — use the CSS variables from the template (`var(--bg-secondary)`, `var(--border)`, `var(--text-primary)`) if you want dark-mode awareness.
|
|
|
|
## Reference examples
|
|
|
|
Look at these example files for working physical-diagram patterns:
|
|
|
|
- `examples/commercial-aircraft-structure.md` — fuselage curves + tapered wings + ellipse engines
|
|
- `examples/wind-turbine-structure.md` — underground foundation, tubular tower, nacelle cutaway
|
|
- `examples/smartphone-layer-anatomy.md` — exploded-view stack with alternating labels
|
|
- `examples/apartment-floor-plan-conversion.md` — walls, doors, windows, proposed changes
|