← back to CSS Spinnerscompare with ground truth →
model output
Claude Sonnet 4.6
CSS Spinners
A 0.86T 0.27
1Looking at the frames, I can see a shape that morphs between different forms - it starts as a rounded shape (like the Storytel/teardrop logo), rotates/morphs to look like a tilted teardrop, then becomes a map pin shape, and returns to the original. The shape is a blue outline on a light blue background.
2
3The animation shows a shape cycling through rotations - it appears to be a "Storytel"-like logo shape that rotates continuously.
4
5<!DOCTYPE html>
6<html lang="en">
7<head>
8<meta charset="UTF-8">
9<meta name="viewport" content="width=device-width, initial-scale=1.0">
10<title>Shape Animation</title>
11<style>
12 * { margin: 0; padding: 0; box-sizing: border-box; }
13
14 body {
15 background: white;
16 }
17
18 .header {
19 width: 100%;
20 height: 245px;
21 background-color: #7ec8f0;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 }
26
27 .shape-container {
28 width: 50px;
29 height: 60px;
30 display: flex;
31 align-items: center;
32 justify-content: center;
33 animation: rotateShape 2s ease-in-out infinite;
34 }
35
36 svg {
37 width: 50px;
38 height: 60px;
39 }
40
41 @keyframes rotateShape {
42 0% {
43 transform: rotate(0deg);
44 }
45 25% {
46 transform: rotate(15deg);
47 }
48 50% {
49 transform: rotate(0deg);
50 }
51 75% {
52 transform: rotate(-10deg);
53 }
54 100% {
55 transform: rotate(0deg);
56 }
57 }
58</style>
59</head>
60<body>
61 <div class="header">
62 <div class="shape-container">
63 <svg viewBox="0 0 50 60" fill="none" xmlns="http://www.w3.org/2000/svg">
64 <path
65 d="M25 3 C36 3, 45 11, 45 22 C45 33, 36 40, 25 48 C14 40, 5 33, 5 22 C5 11, 14 3, 25 3 Z"
66 stroke="#4a90d9"
67 stroke-width="2.5"
68 fill="none"
69 stroke-linecap="round"
70 stroke-linejoin="round"
71 />
72 </svg>
73 </div>
74 </div>
75
76 <script>
77 // Use SVG path morphing for more accurate animation
78 const path = document.querySelector('path');
79
80 const shapes = [
81 // Frame 1: rounded bottom (Storytel-like)
82 "M25 3 C36 3, 45 11, 45 22 C45 33, 36 40, 25 48 C14 40, 5 33, 5 22 C5 11, 14 3, 25 3 Z",
83 // Frame 2: tilted teardrop
84 "M28 3 C39 5, 46 13, 44 24 C42 35, 33 41, 22 46 C13 38, 5 30, 7 19 C9 8, 17 1, 28 3 Z",
85 // Frame 3: map pin
86 "M25 3 C35 3, 43 11, 43 21 C43 31, 35 38, 25 55 C15 38, 7 31, 7 21 C7 11, 15 3, 25 3 Z",
87 // Frame 4: back to rounded
88 "M25 3 C36 3, 45 11, 45 22 C45 33, 36 40, 25 48 C14 40, 5 33, 5 22 C5 11, 14 3, 25 3 Z"
89 ];
90
91 let currentShape = 0;
92 const duration = 600;
93
94 function lerp(a, b, t) {
95 return a + (b - a) * t;
96 }
97
98 function animateToNext() {
99 const nextShape = (currentShape + 1) % shapes.length;
100 const startTime = performance.now();
101
102 function step(now) {
103 const elapsed = now - startTime;
104 const t = Math.min(elapsed / duration, 1);
105 const ease = t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
106
107 path.setAttribute('d', ease < 1 ? shapes[currentShape] : shapes[nextShape]);
108
109 if (t < 1) {
110 requestAnimationFrame(step);
111 } else {
112 currentShape = nextShape;
113 setTimeout(animateToNext, 100);
114 }
115 }
116
117 requestAnimationFrame(step);
118 }
119
120 // Use CSS animation instead - simpler rotation
121 const container = document.querySelector('.shape-container');
122
123 let angle = 0;
124 let targetAngles = [0, 15, 0, -10, 0];
125 let angleIdx = 0;
126
127 function animateRotation() {
128 angleIdx = (angleIdx + 1) % targetAngles.length;
129 container.style.transition = `transform ${duration}ms ease-in-out`;
130 container.style.transform = `rotate(${targetAngles[angleIdx]}deg)`;
131 setTimeout(animateRotation, duration + 100);
132 }
133
134 setTimeout(animateRotation, 500);
135 </script>
136</body>
137</html>