Straight Skeleton SVG Posters by Wavefront
Validate a simple polygon, follow inward wavefront events, inspect topology failures, and map skeleton regions into reproducible layered SVG poster bands.
A straight skeleton records how a polygon's edges collapse inward, creating a sharp structural graph that can organize layered SVG posters. This tutorial treats wavefront events as geometry first, rejects degenerate inputs, and then turns event time and source-edge regions into an authored visual rhythm.
Straight skeletons begin as moving edges
Imagine every edge of a simple polygon moving inward at a constant speed while remaining parallel to its starting orientation. Vertices travel along angle bisectors where adjacent fronts meet. When an edge shrinks away or a reflex vertex reaches another front, the topology changes. The traced vertex paths form the straight skeleton.
The original paper defines this wavefront-based structure. It is not the same as a medial axis: medial axes arise from distance to boundary points and commonly contain curved parabolic branches, while straight-skeleton arcs are produced by moving line segments and are straight under the ordinary model.
That distinction matters visually and technically. A poster based on the wrong structure may still look attractive, but its labels, event logic, offsets, and failure cases will be misleading. Name the generated geometry precisely.
The bundled poster uses nested interpolated polygons for a visual wavefront study and a small orientation test. It does not implement a general robust straight-skeleton solver, so the article treats production computation as a library or research implementation responsibility.
- Every wavefront edge moves inward at the same normal speed.
- Vertices trace skeleton arcs between topology events.
- Offsets may split into components as the front collapses.
| Signal | Interpretation |
|---|---|
| Collapsing polygon wavefront | A simple polygon moves inward with edges parallel to their originals until neighboring fronts meet at timed events. |
Validate the source polygon before events
Accept a simple polygon with a documented orientation and no self-intersections. Remove duplicate consecutive vertices, reject zero-length edges, calculate signed area, and check that non-adjacent segments do not cross. Decide how to handle collinear runs and near-coincident points before floating-point noise reaches event ordering.
Curated presets are ideal for artwork because they let you avoid degenerate configurations while exploring meaningful silhouettes. Start with convex and gently concave forms, then add reflex vertices deliberately. Preserve the original path and validation receipt even when later steps fail.
The origami crease-pattern guide shares a concern for graph validity but represents a different geometric system. Do not infer foldability or structural behavior from a skeleton line simply because both artworks contain angular networks.
Straight skeleton code should refuse holes, weights, open paths, or degeneracies it does not support. A clean error with the offending edge pair is better than exporting plausible but topologically false SVG.
Advance the inward polygon wavefront
Represent each wavefront edge by its supporting line, inward unit normal, source edge identifier, and current topology neighbors. At time t, offset the line inward by t. Intersections of adjacent offset lines produce the moving vertices between events.
For a convex polygon, edges collapse through edge events until the front disappears. Concave forms add split events when a reflex vertex collides with a non-adjacent wavefront edge. The solver must find candidate event times, discard events in the past or outside active geometry, and process the earliest valid event.
Exact predicates or robust constructions matter because nearly simultaneous events can change topology. The CGAL manual documents a mature implementation and its supported variants. Browser artwork can call a verified library, preprocess known presets, or restrict inputs rather than reimplementing computational geometry casually.
Record every accepted event with time, position, type, active edges, and generated skeleton arcs. That log becomes both debugging evidence and artistic material.
Read edge and split events
An edge event occurs when two neighboring wavefront vertices meet and their shared edge disappears. Update adjacency, close the associated skeleton arcs, and create the new moving vertex when appropriate. A split event occurs when a reflex vertex reaches another active edge, potentially dividing one wavefront component into two.
Event candidates can become stale after an earlier topology change. Use generation identifiers or active flags so the priority queue cannot apply obsolete geometry. When event times tie within numeric uncertainty, route the case through explicit degenerate handling rather than an arbitrary array order.
The event-tree figure separates edge and split paths because they produce different poster rhythms. Edge collapses create converging fans; splits create branches and multiple centers. Save that topology instead of flattening everything into unordered line segments.
Straight skeleton artistry begins after event correctness. Line weight and color can emphasize a split hierarchy, but styling should never hide broken adjacency or unclosed regions.
| Event | Topology change |
|---|---|
| Edge event | a shrinking edge disappears |
| Split event | a reflex vertex reaches another front |
| Degenerate tie | requires explicit robust handling |
| Signal | Interpretation |
|---|---|
| Edge-versus-split event tree | Edge collapse and reflex-vertex split events branch the wavefront topology into an ordered event tree. |
Derive offsets and source-edge regions
Wavefront snapshots give inward offset polygons at selected times before topology ends a component. Choose time samples from event intervals rather than naive equal distances that may jump across a split. Each band should be clipped to the active wavefront region and retain the event interval that produced it.
Skeleton arcs partition the original polygon into regions associated with source edges. Those regions can drive color families, hatching direction, labels, or texture. Event time can map to value or saturation, while source orientation can map to line rhythm.
The topographic contour-poster guide creates nested lines from scalar levels. Inward offset polygons look related, but their topology is governed by moving polygon edges. Keep the wavefront construction visible so the edition does not become a generic contour stack.
Polygon offsetting near sharp corners can generate narrow regions and dense bands. Set minimum display widths and merge only as a styling decision after the geometric record remains available.
Runnable artifact — The browser poster animates seven deterministic bands from a curated polygon, while the Node receipt verifies orientation and unique vertices.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Straight skeleton poster</title><style>body{font:16px system-ui;max-width:800px;margin:2rem auto;padding:1rem;background:#edeaf8;color:#211b35}svg{width:100%;height:auto;background:#151128}button{padding:.7rem;margin:.3rem}</style><h1>Straight skeleton poster</h1><svg id="art" viewBox="0 0 640 420" role="img" aria-labelledby="t d"><title id="t">Generated wavefront poster</title><desc id="d">Nested polygon bands and event spokes from a curated simple polygon.</desc><g id="bands"></g></svg><button id="advance">Advance wavefront</button><output id="receipt" aria-live="polite"></output><script>let phase=0;const base=[[90,70],[540,50],[590,220],[470,360],[170,340],[60,210]],center=[320,210];function draw(){bands.innerHTML='';for(let k=0;k<7;k++){const t=(k+phase*.15)/9,pts=base.map(([x,y])=>[x+(center[0]-x)*t,y+(center[1]-y)*t]);const p=document.createElementNS('http://www.w3.org/2000/svg','polygon');p.setAttribute('points',pts.map(x=>x.join(',')).join(' '));p.setAttribute('fill','none');p.setAttribute('stroke',k%2?'#ffcf5c':'#6ee7db');p.setAttribute('stroke-width','5');bands.append(p)}receipt.value='PASS: curated polygon emits seven namespaced wavefront bands'}advance.onclick=()=>{phase=(phase+1)%5;draw()};draw()</script></html>
Compose an SVG poster from the graph
Give the outer polygon, wavefront bands, skeleton arcs, event nodes, and labels separate namespaced groups. Use a stable viewBox and preserve stroke widths under scaling. A restrained palette can distinguish event depth without turning every region into unrelated decoration.
Try three hierarchy layers: broad alternating bands for mass, fine skeleton arcs for direction, and selected event nodes for punctuation. Use source-edge regions to vary pattern or opacity systematically. The poster should remain legible in monochrome so topology does not depend solely on hue.
The Penrose tiling poster guide offers another rigorous source of angular structure, but it emphasizes nonperiodic tiling rather than collapse time. Combining both in one piece would blur the construction; keep the visual thesis singular.
Straight skeleton SVG poster layout is most compelling when the outer silhouette, branching centers, and band rhythm form one composition. Crop and rotate the complete graph rather than editing individual arcs after export.
Export provenance and graceful failure
Save input vertices, orientation, validation checks, solver or library version, numeric mode, event log, offset times, source-edge region mapping, styling parameters, viewBox, and export digest. Give SVG title and description elements a complete reading of the silhouette and event structure.
Reject invalid or unsupported input before producing art. If an event queue reaches a contradictory state, render a diagnostic with active edges and candidate times, not a partial poster without warning. The last valid wavefront can remain visible for repair.
The generated HTML artifact states that its bands come from a curated simple polygon. It does not claim the interpolated bands are a computed general skeleton. Its Node test checks positive orientation and unique vertices, providing a reproducible first gate rather than inflated solver evidence.
For print, archive page size, stroke scaling, color profile, and a monochrome proof. Small event branches that survive on screen may disappear after physical reproduction.
- Skeleton arcs divide the polygon into source-edge regions.
- Wavefront time can map to band width, value, or line weight.
- The edition preserves polygon, event log, and export transform.
| Signal | Interpretation |
|---|---|
| Skeleton regions becoming layered poster bands | Faces associated with source edges receive alternating fills and line weights while the central skeleton remains visible. |
Build the artwork around honest topology
Test triangles, rectangles, convex irregular polygons, one-reflex presets, multiple reflex vertices, collinear runs, nearly parallel edges, narrow corridors, repeated vertices, reversed orientation, self-intersections, and simultaneous-event constructions. The supported set should be explicit in both UI and exported receipt.
Use a verified geometry implementation for cases beyond the curated teaching presets. Compare event logs and arcs on known examples before introducing artistic styling. Performance optimizations must preserve event order and topology; a faster wrong branch is not a valid poster generator.
Straight skeleton work displays the partnership between technical and artistic judgment. Robust predicates protect the graph, while palette, cropping, band selection, and negative space turn that graph into an edition.
Open the poster, advance its visual wavefront, and substitute one validated concave preset. Export only if orientation, intersections, event status, and namespaced SVG groups are all present in the receipt.
Use polygon offsetting for the sampled fronts, wavefront geometry for the event process, SVG poster layout for the final composition, and inward offset polygons for the exported bands. The synthetic preset must keep source vertices and every accepted event time beside the artwork. A straight skeleton edition should also include a deliberately degenerate fixture that is rejected, proving that the generator values honest topology more than uninterrupted output.
Add a second straight skeleton proof for a simple convex polygon whose collapse order can be inspected by hand. Compare that event log with the concave preset before styling either one. This paired evidence catches a solver that draws convincing branches while mishandling the easier baseline, and it gives the poster maker a reliable geometric reference.