1  <svg xmlns="http://www.w3.org/2000/svg"
 2       xmlns:xlink="http://www.w3.org/1999/xlink"
 3       width="600" height="400"
 4       onload="init()">
 5  
 6    <!-- Button -->
 7    <rect id="button" x="250" y="20" width="100" height="40" fill="#ccc" rx="5" ry="5" stroke="#000"/>
 8    <text x="300" y="45" font-size="16" text-anchor="middle" fill="#000">Spin!</text>
 9  
10    <!-- Big Circle -->
11    <circle id="big" cx="300" cy="200" r="50" fill="skyblue" stroke="#000" />
12  
13    <!-- Small Circles -->
14    <circle id="s1" class="small" cx="150" cy="300" r="20" fill="lightgray" stroke="#000" />
15    <circle id="s2" class="small" cx="300" cy="300" r="20" fill="lightgray" stroke="#000" />
16    <circle id="s3" class="small" cx="450" cy="300" r="20" fill="lightgray" stroke="#000" />
17  
18    <script type="application/ecmascript"><![CDATA[
19      let big, smalls, velocity = 0, angle = 0, friction = 0.98;
20      let highlightTimer = null;
21      const sequences = [
22        [0,1,2],[0,2,1],[1,0,2],[1,2,0],
23        [2,0,1],[2,1,0],[0,0,1],[1,1,2],
24        [2,2,0],[0,1,0],[1,2,1],[2,0,2]
25      ];
26  
27      function init() {
28        big = document.getElementById("big");
29        smalls = [document.getElementById("s1"), document.getElementById("s2"), document.getElementById("s3")];
30  
31        const button = document.getElementById("button");
32        button.addEventListener("click", startSpin);
33      }
34  
35      function startSpin() {
36        velocity = 0.3 + Math.random() * 0.4;
37        const seq = sequences[Math.floor(Math.random() * sequences.length)];
38        highlightSequence(seq, 200);
39        animate();
40      }
41  
42      function animate() {
43        if (velocity < 0.001) {
44          velocity = 0;
45          clearInterval(highlightTimer);