← back to SVG Toolscompare with ground truth →
model output
Gemini 3 Flash Preview
SVG Tools
A 0.87T 0.24
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>SVG Tools Animation</title>
7 <style>
8 :root {
9 --bg-color: #fbb034;
10 --tool-color: #231f20;
11 }
12
13 body {
14 margin: 0;
15 padding: 0;
16 display: flex;
17 justify-content: center;
18 align-items: center;
19 height: 100vh;
20 background-color: var(--bg-color);
21 overflow: hidden;
22 }
23
24 .canvas {
25 width: 500px;
26 height: 400px;
27 position: relative;
28 }
29
30 /* SVG styles */
31 .logo-svg {
32 width: 100%;
33 height: 100%;
34 }
35
36 /* Screwdriver Animation */
37 .screwdriver {
38 transform-origin: 300px 115px;
39 animation: flip 1.5s infinite linear;
40 }
41
42 @keyframes flip {
43 0% { transform: rotateX(0deg); }
44 100% { transform: rotateX(360deg); }
45 }
46
47 /* Drill Body Vibration */
48 .drill-group {
49 animation: vibrate 0.08s infinite alternate;
50 }
51
52 @keyframes vibrate {
53 0% { transform: translate(0, 0); }
54 100% { transform: translate(1px, 0.5px); }
55 }
56
57 /* Drill Bit Spiral Animation */
58 .bit-lines {
59 animation: spinBit 0.2s infinite linear;
60 }
61
62 @keyframes spinBit {
63 from { transform: translateX(0); }
64 to { transform: translateX(-20px); }
65 }
66
67 /* Text Styling */
68 .logo-text {
69 font-family: "Arial Black", Gadget, sans-serif;
70 font-weight: 900;
71 fill: var(--tool-color);
72 }
73 </style>
74</head>
75<body>
76
77<div class="canvas">
78 <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg" class="logo-svg">
79
80 <!-- SCREWDRIVER -->
81 <g class="screwdriver">
82 <!-- Tip & Shaft -->
83 <rect x="150" y="112" width="25" height="6" rx="1" fill="var(--tool-color)" />
84 <rect x="175" y="113.5" width="85" height="3" fill="var(--tool-color)" />
85 <!-- Neck -->
86 <rect x="255" y="108" width="10" height="14" fill="var(--tool-color)" />
87 <!-- Handle -->
88 <rect x="265" y="102" width="85" height="26" rx="5" fill="var(--tool-color)" />
89 <!-- Handle Details (Grooves) -->
90 <rect x="275" y="108" width="50" height="2" fill="var(--bg-color)" opacity="0.6" />
91 <rect x="275" y="114" width="50" height="2" fill="var(--bg-color)" opacity="0.6" />
92 <rect x="275" y="120" width="50" height="2" fill="var(--bg-color)" opacity="0.6" />
93 </g>
94
95 <!-- DRILL AND TEXT GROUP -->
96 <g class="drill-group">
97 <!-- Drill Bit Spiral -->
98 <mask id="bitMask">
99 <rect x="150" y="185" width="55" height="10" rx="3" fill="white" />
100 </mask>
101 <g mask="url(#bitMask)">
102 <rect x="150" y="185" width="55" height="10" fill="var(--tool-color)" />
103 <g class="bit-lines">
104 <line x1="140" y1="200" x2="160" y2="180" stroke="var(--bg-color)" stroke-width="2" opacity="0.5" />
105 <line x1="160" y1="200" x2="180" y2="180" stroke="var(--bg-color)" stroke-width="2" opacity="0.5" />
106 <line x1="180" y1="200" x2="200" y2="180" stroke="var(--bg-color)" stroke-width="2" opacity="0.5" />
107 <line x1="200" y1="200" x2="220" y2="180" stroke="var(--bg-color)" stroke-width="2" opacity="0.5" />
108 <line x1="220" y1="200" x2="240" y2="180" stroke="var(--bg-color)" stroke-width="2" opacity="0.5" />
109 </g>
110 </g>
111
112 <!-- Drill Body -->
113 <path d="M 205,178 H 230 V 202 H 205 Z" fill="var(--tool-color)" /> <!-- Chuck -->
114 <path d="M 230,170 H 350 L 350,230 H 315 L 325,300 H 350 V 330 H 280 V 300 H 295 L 285,230 L 230,225 Z" fill="var(--tool-color)" />
115
116 <!-- Body Details -->
117 <rect x="325" y="180" width="2" height="15" fill="var(--bg-color)" opacity="0.4" />
118 <rect x="330" y="180" width="2" height="15" fill="var(--bg-color)" opacity="0.4" />
119 <rect x="335" y="180" width="2" height="15" fill="var(--bg-color)" opacity="0.4" />
120 <circle cx="310" cy="220" r="3" fill="var(--bg-color)" opacity="0.4" />
121 <rect x="305" y="308" width="25" height="10" rx="2" stroke="var(--bg-color)" stroke-width="1.5" fill="none" opacity="0.5" />
122 </g>
123
124 <!-- STATIC TEXT -->
125 <g class="logo-text">
126 <text x="165" y="278" font-size="52" letter-spacing="-2">SVG</text>
127 <text x="167" y="308" font-size="20" letter-spacing="4.5">TOOLS</text>
128 </g>
129 </svg>
130</div>
131
132</body>
133</html>