LLaMA 4 Scout

#CodeVember #12 - shrinking hexagon
A 0.72T 0.37
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>Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16        }
17        .hexagon {
18            width: 50px;
19            height: 50px;
20            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
21            background-color: #fff;
22        }
23        .triangle {
24            width: 0;
25            height: 0;
26            border-style: solid;
27        }
28        .animation-container {
29            position: relative;
30        }
31        .central-hexagon {
32            position: relative;
33            animation: central-hexagon 2s infinite;
34        }
35        @keyframes central-hexagon {
36            0% {
37                transform: scale(1);
38            }
39            50% {
40                transform: scale(1.2);
41            }
42            100% {
43                transform: scale(1);
44            }
45        }
46        .outer-triangles {
47            position: absolute;
48            top: 50%;
49            left: 50%;
50            transform: translate(-50%, -50%);
51            animation: outer-triangles 2s infinite;
52        }
53        .outer-triangles div {
54            position: absolute;
55            transform-origin: center;
56        }
57        .outer-triangles div:nth-child(1) {
58            transform: translate(-100%, 0) rotate(0deg);
59        }
60        .outer-triangles div:nth-child(2) {
61            transform: translate(100%, 0) rotate(90deg);
62        }
63        .outer-triangles div:nth-child(3) {
64            transform: translate(0, -100%) rotate(180deg);
65        }
66        .outer-triangles div:nth-child(4) {
67            transform: translate(0, 100%) rotate(270deg);
68        }
69        @keyframes outer-triangles {
70            0% {
71                opacity: 0;
72                transform: translate(-50%, -50%) scale(0);
73            }
74            20%, 80% {
75                opacity: 1;
76                transform: translate(-50%, -50%) scale(1);
77            }
78            100% {
79                opacity: 0;
80                transform: translate(-50%, -50%) scale(0);
81            }
82        }
83    </style>
84</head>
85<body>
86    <div class="animation-container">
87        <div class="central-hexagon hexagon"></div>
88        <div class="outer-triangles">
89            <div class="triangle" style="border-width: 0 10px 20px 10px; border-color: transparent transparent #fff transparent;"></div>
90            <div class="triangle" style="border-width: 0 10px 20px 10px; border-color: transparent transparent #fff transparent; transform: rotate(90deg);"></div>
91            <div class="triangle" style="border-width: 0 10px 20px 10px; border-color: transparent transparent #fff transparent; transform: rotate(180deg);"></div>
92            <div class="triangle" style="border-width: 0 10px 20px 10px; border-color: transparent transparent #fff transparent; transform: rotate(270deg);"></div>
93        </div>
94    </div>
95</body>
96</html>