Created
April 22, 2026 01:41
-
-
Save jmikedupont2/15116b0370a018fcdfc687468531a49b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600"> | |
| <defs> | |
| <style> | |
| .cube-container { perspective: 1000px; } | |
| .cube { transform-style: preserve-3d; animation: rotate 12s linear infinite; } | |
| @keyframes rotate { | |
| from { transform: rotateX(-20deg) rotateY(0deg); } | |
| to { transform: rotateX(-20deg) rotateY(360deg); } | |
| } | |
| .cube-cell { stroke: none; } | |
| .title { font-family: sans-serif; font-size: 18px; font-weight: bold; fill: #000; } | |
| .subtitle { font-family: monospace; font-size: 12px; fill: #444; } | |
| .axis-label { font-family: monospace; font-size: 10px; fill: #666; } | |
| </style> | |
| </defs> | |
| <rect width="800" height="600" fill="#f5f5f5"/> | |
| <text x="400" y="30" text-anchor="middle" class="title">Monster Cube Visualization</text> | |
| <text x="400" y="50" text-anchor="middle" class="subtitle">194 Monster Conjugacy Classes • 16 Operators • 15 SSP Primes</text> | |
| <g class="cube-container" transform="translate(400,300)"> | |
| <g class="cube"> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-120px, -120px, -120px); -webkit-transform: translate3d(-120px, -120px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, 0px); -webkit-transform: translate3d(0px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, -60px); -webkit-transform: translate3d(-30px, -30px, -60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, 0px); -webkit-transform: translate3d(30px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, 0px); -webkit-transform: translate3d(90px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, 30px); -webkit-transform: translate3d(-30px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, 30px); -webkit-transform: translate3d(90px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, 60px); -webkit-transform: translate3d(-60px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, 60px); -webkit-transform: translate3d(60px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, 90px); -webkit-transform: translate3d(0px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, 0px); -webkit-transform: translate3d(60px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, 60px); -webkit-transform: translate3d(30px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, 90px); -webkit-transform: translate3d(90px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, -60px); -webkit-transform: translate3d(0px, -30px, -60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-60px, 90px, -120px); -webkit-transform: translate3d(-60px, 90px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-60px, 60px, -120px); -webkit-transform: translate3d(-60px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, 30px); -webkit-transform: translate3d(-60px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, 90px); -webkit-transform: translate3d(-60px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-120px, -60px, -120px); -webkit-transform: translate3d(-120px, -60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(0px, 60px, -120px); -webkit-transform: translate3d(0px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, -30px); -webkit-transform: translate3d(0px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-120px, -90px, -120px); -webkit-transform: translate3d(-120px, -90px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, -90px); -webkit-transform: translate3d(30px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, 0px); -webkit-transform: translate3d(-120px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, 90px); -webkit-transform: translate3d(-30px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, -90px); -webkit-transform: translate3d(-60px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, -120px); -webkit-transform: translate3d(-120px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-120px, 60px, -120px); -webkit-transform: translate3d(-120px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, -90px); -webkit-transform: translate3d(-30px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, -30px); -webkit-transform: translate3d(-30px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, 0px); -webkit-transform: translate3d(-90px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-90px, -120px, -120px); -webkit-transform: translate3d(-90px, -120px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-60px, -60px, -120px); -webkit-transform: translate3d(-60px, -60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-30px, 60px, -120px); -webkit-transform: translate3d(-30px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, -60px); -webkit-transform: translate3d(-90px, -30px, -60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, 0px); -webkit-transform: translate3d(-30px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-30px, -60px, -120px); -webkit-transform: translate3d(-30px, -60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, -120px); -webkit-transform: translate3d(90px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, 60px); -webkit-transform: translate3d(-30px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, -120px); -webkit-transform: translate3d(-90px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, -30px); -webkit-transform: translate3d(-60px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, 90px); -webkit-transform: translate3d(-120px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, -120px); -webkit-transform: translate3d(0px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, -30px); -webkit-transform: translate3d(-90px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-90px, -90px, -120px); -webkit-transform: translate3d(-90px, -90px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, -60px); -webkit-transform: translate3d(60px, -30px, -60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(90px, 60px, -120px); -webkit-transform: translate3d(90px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, -90px); -webkit-transform: translate3d(-90px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, -60px); -webkit-transform: translate3d(-60px, -30px, -60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, 30px); -webkit-transform: translate3d(60px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, 60px); -webkit-transform: translate3d(90px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(30px, 60px, -120px); -webkit-transform: translate3d(30px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, 60px); -webkit-transform: translate3d(0px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, 90px); -webkit-transform: translate3d(-90px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, 90px); -webkit-transform: translate3d(30px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, -90px); -webkit-transform: translate3d(90px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-90px, -60px, -120px); -webkit-transform: translate3d(-90px, -60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, 60px); -webkit-transform: translate3d(-90px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, 90px); -webkit-transform: translate3d(60px, -30px, 90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(60px, 60px, -120px); -webkit-transform: translate3d(60px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-90px, 60px, -120px); -webkit-transform: translate3d(-90px, 60px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, -120px); -webkit-transform: translate3d(-60px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, -90px); -webkit-transform: translate3d(-120px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, 30px); -webkit-transform: translate3d(30px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, 30px); -webkit-transform: translate3d(-120px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-60px, -120px, -120px); -webkit-transform: translate3d(-60px, -120px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, -60px); -webkit-transform: translate3d(30px, -30px, -60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, -120px); -webkit-transform: translate3d(60px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, -60px); -webkit-transform: translate3d(-120px, -30px, -60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" style="transform: translate3d(-90px, 90px, -120px); -webkit-transform: translate3d(-90px, 90px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-30px, -30px, -120px); -webkit-transform: translate3d(-30px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, -120px); -webkit-transform: translate3d(30px, -30px, -120px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, -90px); -webkit-transform: translate3d(60px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, -90px); -webkit-transform: translate3d(0px, -30px, -90px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(60px, -30px, -30px); -webkit-transform: translate3d(60px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, -30px); -webkit-transform: translate3d(90px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(30px, -30px, -30px); -webkit-transform: translate3d(30px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, -30px); -webkit-transform: translate3d(-120px, -30px, -30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-60px, -30px, 0px); -webkit-transform: translate3d(-60px, -30px, 0px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(0px, -30px, 30px); -webkit-transform: translate3d(0px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-90px, -30px, 30px); -webkit-transform: translate3d(-90px, -30px, 30px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(-120px, -30px, 60px); -webkit-transform: translate3d(-120px, -30px, 60px);" opacity="0.9"/> | |
| <rect x="-15" y="-15" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" style="transform: translate3d(90px, -30px, -60px); -webkit-transform: translate3d(90px, -30px, -60px);" opacity="0.9"/> | |
| </g> | |
| </g> | |
| <g transform="translate(20, 520)"> | |
| <rect x="0" y="0" width="15" height="15" fill="#ff6b6b" rx="2"/> | |
| <text x="20" y="12" font-family="monospace" font-size="11" fill="#333">Prime</text> | |
| <rect x="80" y="0" width="15" height="15" fill="#4ecdc4" rx="2"/> | |
| <text x="100" y="12" font-family="monospace" font-size="11" fill="#333">Binary</text> | |
| <rect x="180" y="0" width="15" height="15" fill="#ffe66d" rx="2"/> | |
| <text x="200" y="12" font-family="monospace" font-size="11" fill="#333">Ternary</text> | |
| <rect x="280" y="0" width="15" height="15" fill="#1a535c" rx="2"/> | |
| <text x="300" y="12" font-family="monospace" font-size="11" fill="#333">Other</text> | |
| </g> | |
| <g transform="translate(550, 100)"> | |
| <rect x="0" y="0" width="220" height="400" fill="#fff" stroke="#ddd" rx="5"/> | |
| <text x="110" y="25" text-anchor="middle" class="title" font-size="14">Monster Class</text> | |
| <text x="20" y="60" class="subtitle" font-size="12">Current: <tspan id="class-name" font-weight="bold">1A</tspan></text> | |
| <text x="20" y="85" class="subtitle" font-size="12">Order: <tspan id="class-order">1</tspan></text> | |
| <text x="20" y="110" class="subtitle" font-size="12">Angle: <tspan id="angle">360.0°</tspan></text> | |
| <text x="20" y="135" class="subtitle" font-size="12">Z-shift: <tspan id="zshift">0</tspan></text> | |
| <text x="20" y="160" class="subtitle" font-size="12">Permutation: <tspan id="perm">[0,1,2,...]</tspan></text> | |
| <text x="20" y="190" class="subtitle" font-size="12">Fill: <tspan id="fill">17%</tspan></text> | |
| <text x="20" y="215" class="subtitle" font-size="12">Frame: <tspan id="frame">1/194</tspan></text> | |
| <text x="110" y="260" text-anchor="middle" class="axis-label" font-size="10">Operator Legend</text> | |
| <g transform="translate(20, 280)"> | |
| <text x="0" y="15" font-family="monospace" font-size="10" fill="#333">+ - * / % // ** ^</text> | |
| <text x="0" y="30" font-family="monospace" font-size="10" fill="#333">& | <> == !=</text> | |
| </g> | |
| <text x="110" y="320" text-anchor="middle" class="axis-label" font-size="10">Primes (15)</text> | |
| <g transform="translate(20, 340)"> | |
| <text x="0" y="15" font-family="monospace" font-size="9" fill="#333">2 3 5 7 11 13 17 19</text> | |
| <text x="0" y="28" font-family="monospace" font-size="9" fill="#333">23 29 31 41 47 59 71</text> | |
| </g> | |
| <text x="110" y="380" text-anchor="middle" class="subtitle" font-size="10">Rust • Nix • Monstergen</text> | |
| </g> | |
| <script type="application/ecmascript"><![CDATA[ | |
| (function() { | |
| const allCells = document.querySelectorAll('.cube-cell'); | |
| const classNames = ['1A', '2A', '2B', '3A', '3B', '3C', '4A', '4B', '4C', '4D', '5A', '5B', '6A', '6B', '6C', '6D', '6E', '6F', '7A', '7B', '8A', '8B', '8C', '8D', '8E', '8F', '9A', '9B', '10A', '10B', '10C', '10D', '10E', '11A', '12A', '12B', '12C', '12D', '12E', '12F', '12G', '12H', '12I', '12J', '13A', '13B', '14A', '14B', '14C', '15A', '15B', '15C', '15D', '16A', '16B', '16C', '17A', '18A', '18B', '18C', '18D', '18E', '19A', '20A', '20B', '20C', '20D', '20E', '20F', '21A', '21B', '21C', '21D', '22A', '22B', '23A', '23B', '24A', '24B', '24C', '24D', '24E', '24F', '24G', '24H', '24I', '24J', '25A', '26A', '26B', '27A', '27B', '28A', '28B', '28C', '28D', '29A', '30A', '30B', '30C', '30D', '30E', '30F', '30G', '31A', '31B', '32A', '32B', '33A', '33B', '34A', '35A', '35B', '36A', '36B', '36C', '36D', '38A', '39A', '39B', '39C', '39D', '40A', '40B', '40C', '40D', '41A', '42A', '42B', '42C', '42D', '44A', '44B', '45A', '46A', '46B', '46C', '46D', '47A', '47B', '48A', '50A', '51A', '52A', '52B', '54A', '55A', '56A', '56B', '56C', '57A', '59A', '59B', '60A', '60B', '60C', '60D', '60E', '60F', '62A', '62B', '66A', '66B', '68A', '69A', '69B', '70A', '70B', '71A', '71B', '78A', '78B', '78C', '84A', '84B', '84C', '87A', '87B', '88A', '88B', '92A', '92B', '93A', '93B', '94A', '94B', '95A', '95B', '104A', '104B', '105A', '110A', '119A', '119B']; | |
| const orders = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 6, 6, 6, 6, 6, 6, 7, 7, 8, 8, 8, 8, 8, 8, 9, 9, 10, 10, 10, 10, 10, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 13, 13, 14, 14, 14, 15, 15, 15, 15, 16, 16, 16, 17, 18, 18, 18, 18, 18, 19, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 22, 22, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 25, 26, 26, 27, 27, 28, 28, 28, 28, 29, 30, 30, 30, 30, 30, 30, 30, 31, 31, 32, 32, 33, 33, 34, 35, 35, 36, 36, 36, 36, 38, 39, 39, 39, 39, 40, 40, 40, 40, 41, 42, 42, 42, 42, 44, 44, 45, 46, 46, 46, 46, 47, 47, 48, 50, 51, 52, 52, 54, 55, 56, 56, 56, 57, 59, 59, 60, 60, 60, 60, 60, 60, 62, 62, 66, 66, 68, 69, 69, 70, 70, 71, 71, 78, 78, 78, 84, 84, 84, 87, 87, 88, 88, 92, 92, 93, 93, 94, 94, 95, 95, 104, 104, 105, 110, 119, 119]; | |
| let frame = 0; | |
| const totalFrames = classNames.length; | |
| function updateFrame() { | |
| const idx = frame % totalFrames; | |
| const name = classNames[idx]; | |
| const order = orders[idx]; | |
| const degAngle = (360 / order).toFixed(1); | |
| const zshift = (idx * 37) % 8; | |
| const perm = Array.from({length:10}, (_,i) => (i + idx) % 10).slice(0,4).concat(['...']); | |
| document.getElementById('class-name').textContent = name; | |
| document.getElementById('class-order').textContent = order; | |
| document.getElementById('angle').textContent = degAngle + '°'; | |
| document.getElementById('zshift').textContent = zshift; | |
| document.getElementById('perm').textContent = '[' + perm.join(',') + ']'; | |
| document.getElementById('fill').textContent = (17 + (frame % 10)).toString() + '%'; | |
| document.getElementById('frame').textContent = (frame + 1) + '/' + totalFrames; | |
| // Cycle cell colors | |
| allCells.forEach((cell, i) => { | |
| const hue = (360 * frame / totalFrames + i * 5) % 360; | |
| cell.style.fill = `hsl(${hue}, 70%, 65%)`; | |
| cell.style.opacity = (0.7 + 0.3 * Math.sin(2 * Math.PI * frame / totalFrames)).toFixed(2); | |
| }); | |
| frame++; | |
| } | |
| setInterval(updateFrame, 1500); | |
| updateFrame(); | |
| })(); | |
| ]]> | |
| </script> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment