model output
Claude Sonnet 4.6

CSS Direction Animation
A 0.87T 0.53
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Rotating Color Star</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #e8e8e8;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    min-height: 100vh;
16  }
17
18  .container {
19    position: relative;
20    width: 320px;
21    height: 320px;
22  }
23
24  .petal {
25    position: absolute;
26    top: 50%;
27    left: 50%;
28    width: 0;
29    height: 0;
30    transform-origin: center center;
31  }
32
33  /* Each petal is a square rotated, creating a rhombus/diamond shape */
34  .petal::before {
35    content: '';
36    position: absolute;
37    width: 130px;
38    height: 130px;
39    transform: translate(-50%, -50%) rotate(45deg);
40    opacity: 0.55;
41  }
42
43  @keyframes spin {
44    from { transform: rotate(0deg); }
45    to { transform: rotate(360deg); }
46  }
47
48  .spinner {
49    position: absolute;
50    top: 50%;
51    left: 50%;
52    width: 0;
53    height: 0;
54    animation: spin 8s linear infinite;
55  }
56
57  .petal-wrap {
58    position: absolute;
59    top: 0;
60    left: 0;
61    width: 100%;
62    height: 100%;
63    animation: spin 8s linear infinite;
64  }
65</style>
66</head>
67<body>
68
69<canvas id="canvas" width="320" height="320" style="display:block; margin: auto;"></canvas>
70
71<script>
72const canvas = document.getElementById('canvas');
73const ctx = canvas.getContext('2d');
74
75const W = 320, H = 320;
76const cx = W / 2, cy = H / 2;
77
78// 8 petals, each is a square (rotated 45deg = diamond), evenly spaced
79// Colors going around the color wheel
80const colors = [
81  'rgba(240, 100, 100, 0.55)',   // red/pink
82  'rgba(240, 150, 80, 0.55)',    // orange
83  'rgba(240, 210, 60, 0.55)',    // yellow
84  'rgba(180, 230, 80, 0.55)',    // yellow-green
85  'rgba(100, 210, 160, 0.55)',   // teal/cyan
86  'rgba(100, 150, 210, 0.55)',   // blue
87  'rgba(140, 110, 200, 0.55)',   // purple
88  'rgba(200, 100, 160, 0.55)',   // pink/magenta
89];
90
91// Each petal: a square centered at some offset from center, rotated
92// The "star" shape comes from 8 overlapping squares each offset and rotated
93// Actually looking at the frames: it's 8 squares each rotated by i*45deg
94// Each square is offset from center along its rotation axis
95
96const petalSize = 110; // half-size of square
97const offset = 55;     // how far center of square is from origin
98
99let angle = 0;
100
101function drawSquare(ctx, x, y, size, rotation, color) {
102  ctx.save();
103  ctx.translate(x, y);
104  ctx.rotate(rotation);
105  ctx.fillStyle = color;
106  ctx.fillRect(-size/2, -size/2, size, size);
107  ctx.restore();
108}
109
110function draw(timestamp) {
111  ctx.clearRect(0, 0, W, H);
112  
113  // Rotate slowly
114  angle = (timestamp / 8000) * Math.PI * 2;
115  
116  const n = 8;
117  for (let i = 0; i < n; i++) {
118    const baseAngle = angle + (i / n) * Math.PI * 2;
119    // Center of each petal offset from center
120    const px = cx + Math.cos(baseAngle) * offset;
121    const py = cy + Math.sin(baseAngle) * offset;
122    
123    drawSquare(ctx, px, py, petalSize, baseAngle + Math.PI/4, colors[i]);
124  }
125  
126  requestAnimationFrame(draw);
127}
128
129requestAnimationFrame(draw);
130</script>
131
132</body>
133</html>