blob: 7659adf7e1df5150925394801e853ecf75f54f38 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<svg xmlns="http://w3.org" viewBox="0 0 800 600" width="100%" height="100%" style="background: #111216;">
<!-- Global Axis Lines (Replacing the pattern grid for visual tracking) -->
<line x1="0" y1="0" x2="800" y2="0" stroke="#22252a" stroke-width="2" />
<line x1="0" y1="0" x2="0" y2="600" stroke="#22252a" stroke-width="2" />
<!-- Global Origin Reference Marker (0,0) -->
<circle cx="0" cy="0" r="8" fill="#ff3366" />
<!-- ========================================== -->
<!-- LEVEL 1: ROOT TRANSFORMATION -->
<!-- Translate to center-ish and scale up -->
<!-- ========================================== -->
<g id="level-1-root" transform="translate(200, 150) scale(1.2)">
<!-- Level 1 Origin Visual Anchor (Local 0,0) -->
<circle cx="0" cy="0" r="6" fill="#00ffcc" />
<!-- Static baseline shape at Level 1 -->
<rect x="10" y="10" width="80" height="40" fill="#00ffcc" fill-opacity="0.2" stroke="#00ffcc" stroke-width="2" />
<!-- ======================================== -->
<!-- LEVEL 2: NESTED TRANSFORMATION -->
<!-- Rotate around local space and shift -->
<!-- ======================================== -->
<g id="level-2-child" transform="translate(100, 50) rotate(30)">
<!-- Level 2 Origin Visual Anchor (Local 0,0) -->
<circle cx="0" cy="0" r="5" fill="#ffcc00" />
<!-- Static baseline shape at Level 2 -->
<line x1="0" y1="0" x2="100" y2="0" stroke="#ffcc00" stroke-width="2" stroke-dasharray="4 4" />
<!-- ====================================== -->
<!-- LEVEL 3: DEEPLY NESTED TRANSFORMATION -->
<!-- Skew and non-uniform scaling -->
<!-- ====================================== -->
<g id="level-3-leaf" transform="skewX(20) scale(1.5, 0.8) translate(50, -20)">
<!-- Level 3 Origin Visual Anchor (Local 0,0) -->
<circle cx="0" cy="0" r="4" fill="#ff33cc" />
<!-- TARGET TEST SHAPES -->
<!-- Asymmetric triangle to catch mirroring/inversion bugs -->
<polygon points="0,0 60,0 20,40" fill="#ff33cc" fill-opacity="0.7" stroke="#ffffff" stroke-width="2" />
<!-- Small offset circle to check precise translation stack -->
<circle cx="40" cy="20" r="10" fill="#ffffff" />
</g>
<!-- /LEVEL 3 -->
</g>
<!-- /LEVEL 2 -->
</g>
<!-- /LEVEL 1 -->
</svg>
|
