model output
Claude Sonnet 4.6

Only CSS: Love
A 0.31T 0.00
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>Love in Many Languages</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #000;
12    width: 100vw;
13    height: 100vh;
14    overflow: hidden;
15    display: flex;
16    align-items: center;
17    justify-content: center;
18  }
19
20  #canvas-container {
21    position: relative;
22    width: 700px;
23    height: 700px;
24  }
25
26  canvas {
27    position: absolute;
28    top: 0; left: 0;
29  }
30</style>
31</head>
32<body>
33<canvas id="c"></canvas>
34<script>
35const canvas = document.getElementById('c');
36const ctx = canvas.getContext('2d');
37canvas.width = window.innerWidth;
38canvas.height = window.innerHeight;
39
40const cx = canvas.width / 2;
41const cy = canvas.height / 2 + 20;
42const heartScale = 170;
43
44// Words for "love" in many languages
45const words = [
46  'Love', 'Amor', 'Amour', 'Liebe', 'Amore', 'Ljubav', 'Liefde', 'Dashuri',
47  'Кахання', 'Любовь', 'Ljubav', 'Láska', 'Armastus', 'Mahal', 'Szerelem',
48  'Milestiba', 'Mele', 'Cinta', 'Αγάπη', 'Dragoste', 'Laska', 'Renmen',
49  'Sevgiana', 'Sevgi', 'amor', 'kærleiki', 'mborayhu', 'Upendo', 'sooyayyaa',
50  'خوشبویستین', 'چه زکردن', 'Aşk', 'Tinh yêu', 'לְיוּבַּ', 'אהבה',
51  'uthando', 'sopp', 'محبت', 'ярату', 'soymek', 'Kärlek', 'jecel',
52  'munay', 'kjærlighet', 'KHAIR', 'aroha', 'tia', 'СҮЙҮҮ', 'СУЮ',
53  'ljubav', 'sòòyayyàà', 'mborayhu', 'kærleiki', 'amor', 'ama',
54  'karout', 'Любав', 'Sevgi', 'munaña', 'Renmen', 'Láska', 'Dragoste',
55  'عشق', 'Cinta', 'Любовта', 'Milestiba', 'Szerelem', 'Armastus',
56  'Mahal', 'אהבה', 'Grá', 'Laska', 'Dashuri', 'Кахання',
57];
58
59// Heart parametric: x = 16sin^3(t), y = -(13cos(t) - 5cos(2t) - 2cos(3t) - cos(4t))
60function heartPoint(t) {
61  const x = 16 * Math.pow(Math.sin(t), 3);
62  const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
63  return { x: cx + x * heartScale, y: cy + y * heartScale * 0.9 };
64}
65
66// Place words along heart path
67const numWords = words.length;
68const wordObjects = [];
69
70// Distribute words around the heart
71for (let i = 0; i < numWords; i++) {
72  const t = (i / numWords) * Math.PI * 2;
73  const pt = heartPoint(t);
74  
75  // Tangent for rotation
76  const dt = 0.01;
77  const pt2 = heartPoint(t + dt);
78  const angle = Math.atan2(pt2.y - pt.y, pt2.x - pt.x);
79  
80  wordObjects.push({
81    word: words[i],
82    baseT: t,
83    x: pt.x,
84    y: pt.y,
85    angle: angle,
86    isLove: words[i] === 'Love',
87    size: words[i] === 'Love' ? 28 : (10 + Math.random() * 8),
88    offset: Math.random() * Math.PI * 2,
89    speed: 0.3 + Math.random() * 0.2,
90  });
91}
92
93let startTime = null;
94const rotationPeriod = 20000; // ms for full rotation
95
96function draw(timestamp) {
97  if (!startTime) startTime = timestamp;
98  const elapsed = timestamp - startTime;
99  
100  ctx.clearRect(0, 0, canvas.width, canvas.height);
101  
102  // Draw glow background hint
103  const grad = ctx.createRadialGradient(cx, cy, 50, cx, cy, 350);
104  grad.addColorStop(0, 'rgba(40,20,0,0.15)');
105  grad.addColorStop(1, 'rgba(0,0,0,0)');
106  ctx.fillStyle = grad;
107  ctx.fillRect(0, 0, canvas.width, canvas.height);
108
109  // Rotation offset - words travel around the heart
110  const rotOffset = (elapsed / rotationPeriod) * Math.PI * 2;
111
112  for (let i = 0; i < wordObjects.length; i++) {
113    const wo = wordObjects[i];
114    const t = wo.baseT + rotOffset;
115    const pt = heartPoint(t);
116    
117    const dt = 0.01;
118    const pt2 = heartPoint(t + dt);
119    const angle = Math.atan2(pt2.y - pt.y, pt2.x - pt.x);
120
121    ctx.save();
122    ctx.translate(pt.x, pt.y);
123    ctx.rotate(angle);
124    
125    const fontSize = wo.isLove ? 30 : wo.size;
126    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
127    
128    if (wo.isLove) {
129      // Red glowing Love
130      ctx.shadowColor = '#ff0000';
131      ctx.shadowBlur = 20;
132      ctx.fillStyle = '#ff2020';
133    } else {
134      // Golden glowing text
135      const glow = 0.7 + 0.3 * Math.sin(elapsed * 0.001 + wo.offset);
136      ctx.shadowColor = `rgba(255, 220, 50, ${glow})`;
137      ctx.shadowBlur = 12;
138      ctx.fillStyle = `rgba(255, 230, 100, ${0.8 + 0.2 * glow})`;
139    }
140    
141    ctx.fillText(wo.word, 0, 0);
142    ctx.restore();
143  }
144
145  requestAnimationFrame(draw);
146}
147
148requestAnimationFrame(draw);
149
150window.addEventListener('resize', () => {
151  canvas.width = window.innerWidth;
152  canvas.height = window.innerHeight;
153});
154</script>
155</body>
156</html>