Build original SVG elements
See this course’s project requirements
An original 8–12-second three-stage SVG/CSS explanation with deliberate timing, readable title states, pause and reduced-motion alternatives, source and storyboard.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Create a three-stage explanatory storyboard and original SVG.
- Record actual duration/keyframe percentage times.
- Keep geometry, labels and static text consistent.
- Supply manual play/pause/static and reduced-motion rules.
- Deliver fresh HTML with actual source/browser test evidence and limits.
Review and revise
Use these criteria to check your work and choose what to improve.
- Meaning: stages serve a stated relationship.
- Geometry/timing: coordinates and percentages agree.
- Control: pause/static meaning work where actually tested.
- Evidence: fresh artifact and separate source/interaction claims.
Want more background?
The idea in everyday life
Use simple circles and a path; no downloaded icon or generated bitmap is needed. SVG circle coordinates name the center and radius, while the path lists edge endpoints. Keep the visible labels and title/description synchronized. A viewBox defines the coordinate system independently of displayed width.
Vector geometry should carry the explanation.
Build original SVG elements — worked practice
Vector geometry should carry the explanation.
Original viewBox 0 0 480 230; A(80, 160), B(240, 40), C(400, 160); each radius 12. Path M80 160 L240 40 L400 160 Z returns to A. B is shifted upward relative to A/C; the points are noncollinear. SVG title/desc states the same relationship, and nearby visible labels A/B/C do not depend on color alone.
1. 2.1 Build
Open motion.html or create the supplied SVG geometry. Match each circle center to its A/B/C label.
You should see: Centers/labels agree.
2. 2.2 Build
Trace the path’s start, two line endpoints and closing Z. Check that no edge stops at a different coordinate.
You should see: The path closes C to A.
3. 2.3 Build
Write a concise SVG title/description and a visible static list; describe the geometry rather than only “nice graphic”.
You should see: Text states the same meaning.
4. 2.4 Build
Move B to x 240/y80 in a copy. Update the geometry and description if needed, then inspect the actual rendered bounds.
You should see: The changed B still creates noncollinear geometry and fits the viewBox.
What to finish
An original SVG with coordinate/description checks.
Watch for this
Changing a circle while leaving its connecting path at the old coordinate.
How can I tell I understand it?
You can trace the exact points and edges in source and render.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Read actual circle center/radius, rect and line coordinate controls after canonical redirect; original figures/code supplied.
Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.
Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.