jb/diagram-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loop ring reads as one continuous circle

Browse Source 
All six ring connectors are now arcs of the same radius-240 circle
(clockwise sweep, station-edge landings) instead of a mix of arcs and
right-angled verticals. type-loop.md mandates ring arcs as the type's
connector grammar — a documented exception to SKILL.md §6 rule 1, same
precedent as medallion's promotion arcs — and adds the mixed
arc + orthogonal ring as an anti-pattern. Screenshot recaptured.
This commit is contained in:
Cathryn Lavery
2026-07-14 19:48:55 -07:00
parent e175eb723b
commit cfab0e0d97
5 changed files with 50 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/diagram-design/assets/example-loop-dark.html
+7 -7
View File
@@ -49,13 +49,13 @@
<rect width="1040" height="680" fill="#2d3142"/>
<rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
<!-- Solid clockwise ring: every endpoint lands on a station edge. -->
<path class="ring" d="M600 92 C648 100 696 140 672 188" marker-end="url(#arrow)"/>
<path class="ring" d="M808 236 H824 Q832 236 832 244 V436 Q832 444 824 444 H808" marker-end="url(#arrow)"/>
<path class="ring" d="M672 492 C696 520 648 564 600 572" marker-end="url(#arrow)"/>
<path class="ring" d="M440 572 C392 564 344 520 368 492" marker-end="url(#arrow)"/>
<path class="ring" d="M232 444 H216 Q208 444 208 436 V244 Q208 236 216 236 H232" marker-end="url(#arrow)"/>
<path class="ring" d="M368 188 C344 140 392 100 440 92" marker-end="url(#arrow)"/>
<!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
<path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
<path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
<path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
<path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
<path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
<path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
<!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
<path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>
skills/diagram-design/assets/example-loop-full.html
+7 -7
View File
@@ -69,13 +69,13 @@
<rect width="1040" height="680" fill="#f5f5f5"/>
<rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
<!-- Solid clockwise ring: every endpoint lands on a station edge. -->
<path class="ring" d="M600 92 C648 100 696 140 672 188" marker-end="url(#arrow)"/>
<path class="ring" d="M808 236 H824 Q832 236 832 244 V436 Q832 444 824 444 H808" marker-end="url(#arrow)"/>
<path class="ring" d="M672 492 C696 520 648 564 600 572" marker-end="url(#arrow)"/>
<path class="ring" d="M440 572 C392 564 344 520 368 492" marker-end="url(#arrow)"/>
<path class="ring" d="M232 444 H216 Q208 444 208 436 V244 Q208 236 216 236 H232" marker-end="url(#arrow)"/>
<path class="ring" d="M368 188 C344 140 392 100 440 92" marker-end="url(#arrow)"/>
<!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
<path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
<path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
<path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
<path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
<path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
<path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
<!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
<path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>
skills/diagram-design/assets/example-loop.html
+7 -7
View File
@@ -49,13 +49,13 @@
<rect width="1040" height="680" fill="#f5f5f5"/>
<rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
<!-- Solid clockwise ring: every endpoint lands on a station edge. -->
<path class="ring" d="M600 92 C648 100 696 140 672 188" marker-end="url(#arrow)"/>
<path class="ring" d="M808 236 H824 Q832 236 832 244 V436 Q832 444 824 444 H808" marker-end="url(#arrow)"/>
<path class="ring" d="M672 492 C696 520 648 564 600 572" marker-end="url(#arrow)"/>
<path class="ring" d="M440 572 C392 564 344 520 368 492" marker-end="url(#arrow)"/>
<path class="ring" d="M232 444 H216 Q208 444 208 436 V244 Q208 236 216 236 H232" marker-end="url(#arrow)"/>
<path class="ring" d="M368 188 C344 140 392 100 440 92" marker-end="url(#arrow)"/>
<!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
<path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
<path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
<path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
<path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
<path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
<path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
<!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
<path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>