Reusable animated SVG templates for the four platform-skills:awesome-docs diagram patterns. Copy and adapt these files — substitute box labels, path coordinates, and field names for your specific technology.

Templates

File	Pattern	Use for
`arch-flow.svg`	Architecture flow	Any system with multiple components and data flow
`lifecycle-loop.svg`	Decision/lifecycle loop	Any repeating control loop with a threshold gate
`field-carousel.svg`	Field explainer carousel	Any resource with a YAML/config spec
`timeline-phases.svg`	Timeline phases	Any workload with distinct load phases

How to adapt

Open the SVG in a text editor
Replace Box Label text with your component names
Update offset-path coordinates to match your box positions
For field-carousel.svg: replace the YAML field names and tooltip text
Adjust timing values (animation: duration) if needed
Verify N × slot = T holds for field-carousel timing

Validation

# Check SVG file sizes (must be under 50KB for GitHub inline rendering)
ls -lh examples/awesome-docs/*.svg

# Check SVGs have no external hrefs or blocked imports
grep -lE 'href="https?://|xlink:href="https?://|@import' examples/awesome-docs/*.svg \
  && echo "WARNING: external refs found" || echo "OK"