← back to Only CSS: Screw 2compare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Screw 2
A 0.42T 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>Document</title>
7 <style>
8 body {
9 background-color: #1a1d23;
10 font-family: Arial, sans-serif;
11 margin: 0;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 }
17 .logo {
18 font-size: 50px;
19 font-weight: bold;
20 white-space: nowrap;
21 }
22 @keyframes spin {
23 0% {
24 transform: rotate(0deg);
25 }
26 100% {
27 transform: rotate(360deg);
28 }
29 }
30 .logo span {
31 position: relative;
32 }
33 .logo span::before {
34 content: "";
35 position: absolute;
36 top: 0;
37 left: 0;
38 width: 100%;
39 height: 100%;
40 background:
41 linear-gradient(90deg, white 0%, white 100%),
42 linear-gradient(0deg, black 0%, black 100%);
43 background-size: 30px 30px, 30px 30px;
44 background-position: 0% 0%, 0% 0%;
45 background-repeat: no-repeat;
46 animation: spin 10s linear infinite;
47 clip-path:
48 polygon(20% 0%, 50% 30%, 80% 0%, 100% 50%, 80% 100%, 50% 70%, 20% 100%, 0% 50%);
49 opacity: 0.5;
50 }
51 </style>
52</head>
53<body>
54 <div class="logo">SCREW</div>
55</body>
56</html>