model output
LLaMA 4 Scout

Pure CSS animated check mark
A 0.40T 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>Checkmark Animation</title>
7    <style>
8        body {
9            background-color: #ADD8E6; /* Light teal background */
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .checkmark {
17            position: relative;
18            width: 100px;
19            height: 100px;
20            border-radius: 50%;
21            border: 2px solid #000;
22            display: flex;
23            justify-content: center;
24            align-items: center;
25        }
26        .checkmark::before {
27            content: "";
28            position: absolute;
29            width: 50%;
30            height: 2px;
31            background-color: #ccc;
32            transform: rotate(45deg);
33        }
34        .checkmark svg {
35            width: 50%;
36            height: 50%;
37            color: #fff;
38        }
39    </style>
40</head>
41<body>
42    <div class="checkmark">
43        <svg viewBox="0 0 24 24">
44            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
45        </svg>
46    </div>
47
48    <script>
49        // Animation logic
50        const checkmark = document.querySelector('.checkmark');
51
52        // Initial state
53        checkmark.style.opacity = 0;
54        checkmark.style.transform = 'scale(0.5)';
55        checkmark.style.transition = 'all 0.5s ease-in-out';
56
57        // Animation sequence
58        const sequence = [
59            { opacity: 1, transform: 'scale(1)', delay: 0 },
60            { opacity: 1, transform: 'scale(1)', delay: 0.5s },
61            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
62            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
63            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
64            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
65            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
66            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
67            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
68            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
69            { opacity: 1, transform: 'scale(1)', delay: 0.5 },
70        ];
71
72        let i = 0;
73        const intervalId = setInterval(() => {
74            if (i >= sequence.length) {
75                clearInterval(intervalId);
76                return;
77            }
78
79            const { opacity, transform, delay } = sequence[i];
80            checkmark.style.opacity = opacity;
81            checkmark.style.transform = transform;
82            checkmark.style.transitionDelay = `${delay}s`;
83
84            i++;
85        }, 500);
86    </script>
87</body>
88</html>