Qwen3-VL-8B-Instruct

#CodeVember #12 - shrinking hexagon
A 0.51T 0.25
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>Hexagon Animation</title>
7<style>
8  body {
9    background-color: #121212;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .hexagon {
17    width: 60px;
18    height: 60px;
19    background-color: #ccc;
20    position: relative;
21    transform: rotate(0deg);
22    animation: pulse 1.5s ease-in-out forwards;
23  }
24  .hexagon::before {
25    content: '';
26    position: absolute;
27    top: -10px;
28    left: 0;
29    width: 0;
30    height: 0;
31    border-left: 10px solid transparent;
32    border-right: 10px solid transparent;
33    border-bottom: 20px solid #ccc;
34  }
35  .hexagon::after {
36    content: '';
37    position: absolute;
38    top: -10px;
39    right: 0;
40    width: 0;
41    height: 0;
42    border-left: 10px solid transparent;
43    border-right: 10px solid transparent;
44    border-bottom: 20px solid #ccc;
45  }
46  .hexagon:nth-child(2) {
47    transform: rotate(60deg);
48    animation: pulse 1.5s ease-in-out 0.1s forwards;
49  }
50  .hexagon:nth-child(3) {
51    transform: rotate(120deg);
52    animation: pulse 1.5s ease-in-out 0.2s forwards;
53  }
54  .hexagon:nth-child(4) {
55    transform: rotate(180deg);
56    animation: pulse 1.5s ease-in-out 0.3s forwards;
57  }
58  .hexagon:nth-child(5) {
59    transform: rotate(240deg);
60    animation: pulse 1.5s ease-in-out 0.4s forwards;
61  }
62  .hexagon:nth-child(6) {
63    transform: rotate(300deg);
64    animation: pulse 1.5s ease-in-out 0.5s forwards;
65  }
66  @keyframes pulse {
67    0% {
68      transform: rotate(0deg);
69      opacity: 1;
70    }
71    50% {
72      transform: rotate(180deg);
73      opacity: 0.5;
74    }
75    100% {
76      transform: rotate(360deg);
77      opacity: 1;
78    }
79  }
80</style>
81</head>
82<body>
83  <div class="hexagon"></div>
84  <div class="hexagon"></div>
85  <div class="hexagon"></div>
86  <div class="hexagon"></div>
87  <div class="hexagon"></div>
88  <div class="hexagon"></div>
89</body>
90</html>