Skip to content

Instantly share code, notes, and snippets.

@jmikedupont2

jmikedupont2/index.svg

Last active April 22, 2026 01:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jmikedupont2/d061ca7c4830fff2d13a23fd2ac28915 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jmikedupont2/d061ca7c4830fff2d13a23fd2ac28915 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
index.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
<defs>
<style>
@keyframes rotate3d {
0% { transform: rotateX(-20deg) rotateY(0deg); }
25% { transform: rotateX(-20deg) rotateY(90deg); }
50% { transform: rotateX(-20deg) rotateY(180deg); }
75% { transform: rotateX(-20deg) rotateY(270deg); }
100% { transform: rotateX(-20deg) rotateY(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
.cube-wrapper {
perspective: 1000px;
}
.cube-container {
transform-style: preserve-3d;
animation: rotate3d 12s ease-in-out infinite;
}
.cube-slice {
transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube-cell {
animation: pulse 2s ease-in-out infinite;
transition: all 0.3s ease;
}
.grid-line {
stroke: #333;
stroke-width: 0.5;
}
.axis-label {
font-family: monospace;
font-size: 10px;
fill: #666;
}
.title {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
fill: #000;
}
.subtitle {
font-family: monospace;
font-size: 12px;
fill: #444;
}
</style>
<g id="slice-content">
<g class="grid">
<g class="vlines">
<line x1="0" y1="0" x2="0" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="50" y1="0" x2="50" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="100" y1="0" x2="100" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="150" y1="0" x2="150" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="200" y1="0" x2="200" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="250" y1="0" x2="250" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="300" y1="0" x2="300" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="350" y1="0" x2="350" y2="400" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
</g>
<g class="hlines">
<line x1="0" y1="0" x2="350" y2="0" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="0" y1="50" x2="350" y2="50" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="0" y1="100" x2="350" y2="100" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="0" y1="150" x2="350" y2="150" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="0" y1="200" x2="350" y2="200" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="0" y1="250" x2="350" y2="250" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="0" y1="300" x2="350" y2="300" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
<line x1="0" y1="350" x2="350" y2="350" class="grid-line" stroke-dasharray="2,2" opacity="0.3"/>
</g>
</g>
<g class="cells">
<rect x="10" y="10" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="60" y="10" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="110" y="10" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="160" y="10" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="210" y="10" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="260" y="10" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="310" y="10" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="360" y="10" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="10" y="60" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="60" y="60" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="110" y="60" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="160" y="60" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="210" y="60" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="260" y="60" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="310" y="60" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="360" y="60" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="10" y="110" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="60" y="110" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="110" y="110" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="160" y="110" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="210" y="110" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="260" y="110" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="310" y="110" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="360" y="110" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="10" y="160" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="60" y="160" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="110" y="160" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="160" y="160" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="210" y="160" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="260" y="160" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="310" y="160" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="360" y="160" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="10" y="210" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="60" y="210" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="110" y="210" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="160" y="210" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="210" y="210" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="260" y="210" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="310" y="210" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="360" y="210" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="10" y="260" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="60" y="260" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="110" y="260" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="160" y="260" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="210" y="260" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="260" y="260" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="310" y="260" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="360" y="260" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="10" y="310" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="60" y="310" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="110" y="310" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="160" y="310" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="210" y="310" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="260" y="310" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="310" y="310" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="360" y="310" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="10" y="360" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="60" y="360" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="110" y="360" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.9"/>
<rect x="160" y="360" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.8"/>
<rect x="210" y="360" width="30" height="30" fill="#1a535c" rx="2" class="cube-cell" opacity="0.7"/>
<rect x="260" y="360" width="30" height="30" fill="#ff6b6b" rx="2" class="cube-cell" opacity="0.85"/>
<rect x="310" y="360" width="30" height="30" fill="#4ecdc4" rx="2" class="cube-cell" opacity="0.75"/>
<rect x="360" y="360" width="30" height="30" fill="#ffe66d" rx="2" class="cube-cell" opacity="0.9"/>
</g>
</g>
</defs>
<!-- Background -->
<rect width="800" height="600" fill="#f5f5f5"/>
<!-- Title -->
<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>
<!-- 3D rotating cube -->
<g class="cube-wrapper" transform="translate(400, 300)">
<g class="cube-container">
<g class="cube-slice" style="transform: translate(-175px, -175px) translateZ(-125px); opacity: 0.4;"><use href="#slice-content"/></g>
<g class="cube-slice" style="transform: translate(-175px, -175px) translateZ(-75px); opacity: 0.6;"><use href="#slice-content"/></g>
<g class="cube-slice" style="transform: translate(-175px, -175px) translateZ(-25px); opacity: 0.8;"><use href="#slice-content"/></g>
<g class="cube-slice" style="transform: translate(-175px, -175px) translateZ(25px); opacity: 1.0;"><use href="#slice-content"/></g>
<g class="cube-slice" style="transform: translate(-175px, -175px) translateZ(75px); opacity: 0.8;"><use href="#slice-content"/></g>
<g class="cube-slice" style="transform: translate(-175px, -175px) translateZ(125px); opacity: 0.6;"><use href="#slice-content"/></g>
</g>
</g>
<!-- Color Legend -->
<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>
<!-- Info panel -->
<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">&amp; | &lt;&gt; == !=</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 = 194;
function updateFrame() {
const idx = frame % totalFrames;
const name = classNames[idx];
const order = orders[idx];
const angle = (2 * Math.PI / order).toFixed(2);
const degAngle = (360 / order).toFixed(1);
const zshift = (idx * 37) % 8;
const perm = Array.from({length:10}, (_,i) => (i + idx) % 10).slice(0,4) + ['...'];
document.getElementById('class-name').textContent = name;
document.getElementById('class-order').textContent = order;
document.getElementById('angle').textContent = degAngle + '\u00B0';
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;
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