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:#f4b52a;
10 --ink:#262626;
11 --accent:#f0b62b;
12 --w:1024;
13 --h:768;
14 }
15 html,body{
16 margin:0;
17 height:100%;
18 background:var(--bg);
19 overflow:hidden;
20 }
21 body{
22 display:grid;
23 place-items:center;
24 font-family:Impact, Haettenschweiler, "Arial Black", sans-serif;
25 }
26 svg{
27 width:min(100vw, calc(100vh * 1024 / 768));
28 height:auto;
29 display:block;
30 background:var(--bg);
31 }
32
33 .ink{ fill:var(--ink); }
34 .stroke-ink{ stroke:var(--ink); }
35 .stroke-accent{ stroke:var(--accent); }
36 .no-fill{ fill:none; }
37
38 /* screwdriver tip morph */
39 #flatTip, #philTip, #torxTip{
40 transform-box:fill-box;
41 transform-origin:100% 50%;
42 animation: tipCycle 1.8s steps(1,end) infinite;
43 }
44 #philTip{ animation-delay:-0.6s; }
45 #torxTip{ animation-delay:-1.2s; }
46
47 @keyframes tipCycle{
48 0%, 33.333% { opacity:1; }
49 33.334%, 100% { opacity:0; }
50 }
51
52 /* subtle drill vibration */
53 #drillGroup{
54 transform-box:fill-box;
55 transform-origin:65% 55%;
56 animation: drillBuzz .18s linear infinite;
57 }
58 @keyframes drillBuzz{
59 0% { transform:translate(0px,0px); }
60 25% { transform:translate(.8px,-.4px); }
61 50% { transform:translate(0px,.4px); }
62 75% { transform:translate(-.8px,-.2px); }
63 100% { transform:translate(0px,0px); }
64 }
65
66 /* drill bit spin illusion */
67 #bitPattern{
68 animation: bitSpin .22s linear infinite;
69 transform-origin:0 0;
70 }
71 @keyframes bitSpin{
72 0% { transform:translateX(0); }
73 100% { transform:translateX(8px); }
74 }
75
76 /* tiny panel flicker like the sampled frames */
77 .panel-line{
78 animation: panelFlicker 1.8s steps(1,end) infinite;
79 }
80 .panel-line:nth-child(1){ animation-delay:-0.00s; }
81 .panel-line:nth-child(2){ animation-delay:-0.08s; }
82 .panel-line:nth-child(3){ animation-delay:-0.16s; }
83 .panel-line:nth-child(4){ animation-delay:-0.24s; }
84 .panel-line:nth-child(5){ animation-delay:-0.32s; }
85 .panel-line:nth-child(6){ animation-delay:-0.40s; }
86
87 @keyframes panelFlicker{
88 0%, 70% { opacity:1; }
89 71%, 82% { opacity:.25; }
90 83%, 100% { opacity:1; }
91 }
92
93 .battery-outline{
94 fill:none;
95 stroke:var(--accent);
96 stroke-width:3;
97 stroke-linejoin:round;
98 }
99
100 .txt{
101 fill:var(--ink);
102 letter-spacing:1px;
103 }
104</style>
105</head>
106<body>
107<svg viewBox="0 0 1024 768" aria-label="Animated tools graphic">
108 <!-- screwdriver -->
109 <g id="screwdriver" transform="translate(332 239)">
110 <!-- interchangeable tips -->
111 <g id="flatTip">
112 <polygon class="ink" points="0,15 22,11 45,11 45,29 22,29 0,25"/>
113 </g>
114 <g id="philTip" opacity="0">
115 <polygon class="ink" points="0,19 26,14 45,14 45,26 26,26"/>
116 <rect class="ink" x="18" y="17" width="4" height="6"/>
117 </g>
118 <g id="torxTip" opacity="0">
119 <polygon class="ink" points="0,19 18,16 28,12 45,14 45,26 28,28 18,24 0,21"/>
120 </g>
121
122 <rect class="ink" x="45" y="15" width="142" height="14" rx="1"/>
123 <rect class="ink" x="191" y="0" width="18" height="46" rx="3"/>
124 <rect class="ink" x="214" y="0" width="141" height="46" rx="12"/>
125 <rect x="227" y="8" width="114" height="10" rx="5" fill="var(--bg)"/>
126 <rect x="227" y="28" width="114" height="10" rx="5" fill="var(--bg)"/>
127 </g>
128
129 <!-- drill -->
130 <g id="drillGroup" transform="translate(325 351)">
131 <!-- spinning bit -->
132 <g transform="translate(0 33)">
133 <defs>
134 <pattern id="bitPattern" patternUnits="userSpaceOnUse" width="16" height="10">
135 <rect width="16" height="10" fill="transparent"/>
136 <path d="M0,10 L6,0" stroke="var(--ink)" stroke-width="4" />
137 </pattern>
138 </defs>
139 <rect x="0" y="0" width="80" height="10" fill="url(#bitPattern)"/>
140 </g>
141
142 <!-- chuck / front -->
143 <polygon class="ink" points="80,28 104,16 104,58 80,46"/>
144 <rect class="ink" x="104" y="13" width="36" height="52"/>
145 <rect x="138" y="13" width="2" height="52" fill="var(--bg)"/>
146 <polygon class="ink" points="142,10 176,6 176,72 142,68"/>
147 <rect class="ink" x="172" y="28" width="8" height="22"/>
148
149 <!-- body -->
150 <path class="ink" d="
151 M182,0
152 L352,0
153 Q372,2 374,12
154 L374,62
155 Q372,72 352,76
156 Q338,79 336,88
157 Q334,98 338,112
158 L364,190
159 L318,190
160 L292,108
161 Q288,92 278,86
162 Q272,83 258,83
163 L188,80
164 Q182,80 182,74
165 Z"/>
166
167 <!-- rear cap -->
168 <path class="ink" d="M350,0 Q374,4 374,10 L374,64 Q374,70 350,76 Z"/>
169
170 <!-- grip cutout -->
171 <path fill="var(--bg)" d="
172 M252,84
173 Q270,84 276,92
174 Q282,100 284,112
175 L286,126
176 L252,126
177 Q262,116 262,104
178 Q262,94 252,84 Z"/>
179
180 <!-- handle -->
181 <path class="ink" d="
182 M286,126
183 L318,190
184 L304,190
185 L304,198
186 L246,198
187 L246,190
188 Q258,176 260,162
189 Q262,148 258,132
190 Z"/>
191
192 <!-- battery -->
193 <rect class="ink" x="246" y="190" width="128" height="45" rx="4"/>
194 <rect class="battery-outline" x="304" y="178" width="42" height="36" rx="5"/>
195
196 <!-- details -->
197 <rect x="198" y="12" width="10" height="10" fill="var(--accent)"/>
198 <rect x="198" y="28" width="10" height="10" fill="var(--accent)"/>
199 <rect x="198" y="44" width="10" height="10" fill="var(--accent)"/>
200 <rect x="198" y="60" width="10" height="10" fill="var(--accent)"/>
201
202 <g transform="translate(308 18)">
203 <rect class="panel-line" x="0" y="0" width="26" height="2.5" fill="var(--accent)"/>
204 <rect class="panel-line" x="0" y="7" width="26" height="2.5" fill="var(--accent)"/>
205 <rect class="panel-line" x="0" y="14" width="26" height="2.5" fill="var(--accent)"/>
206 <rect class="panel-line" x="0" y="21" width="26" height="2.5" fill="var(--accent)"/>
207 <rect class="panel-line" x="0" y="28" width="26" height="2.5" fill="var(--accent)"/>
208 <rect class="panel-line" x="0" y="35" width="26" height="2.5" fill="var(--accent)"/>
209 </g>
210
211 <circle cx="318" cy="76" r="7" fill="none" stroke="var(--accent)" stroke-width="3"/>
212 </g>
213
214 <!-- SVG TOOLS text -->
215 <g transform="translate(288 460)" class="txt">
216 <!-- SVG -->
217 <path d="M0 18 L0 4 L12 0 L42 0 L52 8 L52 18 L38 18 L32 12 L18 12 L14 16 L14 24 L18 28 L40 28 L52 36 L52 52 L42 60 L10 60 L0 52 L0 38 L14 38 L14 46 L18 48 L34 48 L38 44 L38 38 L34 34 L12 34 Z"/>
218 <path d="M60 0 L80 0 L96 46 L112 0 L132 0 L108 60 L84 60 Z"/>
219 <path d="M138 10 L148 0 L176 0 L176 12 L154 12 L150 16 L150 44 L154 48 L170 48 L170 34 L160 34 L160 22 L190 22 L190 52 L180 60 L148 60 L138 50 Z"/>
220
221 <!-- TOOLS -->
222 <g transform="translate(8 60)">
223 <path d="M0 0 L42 0 L42 12 L28 12 L28 36 L14 36 L14 12 L0 12 Z"/>
224 <path d="M48 10 L58 0 L86 0 L96 10 L96 26 L86 36 L58 36 L48 26 Z M62 12 L62 24 L82 24 L82 12 Z"/>
225 <path d="M102 10 L112 0 L140 0 L150 10 L150 26 L140 36 L112 36 L102 26 Z M116 12 L116 24 L136 24 L136 12 Z"/>
226 <path d="M156 10 L166 0 L194 0 L204 10 L204 26 L194 36 L166 36 L156 26 Z M170 12 L170 24 L190 24 L190 12 Z"/>
227 <path d="M212 0 L226 0 L226 24 L230 24 L230 36 L212 36 Z"/>
228 <path d="M234 10 L244 0 L272 0 L282 8 L282 18 L268 18 L264 12 L250 12 L248 14 L248 18 L252 20 L270 20 L282 28 L282 36 L272 44 L242 44 L234 36 L234 26 L248 26 L248 32 L252 34 L266 34 L268 32 L268 28 L264 26 L246 26 L234 18 Z"/>
229 </g>
230 </g>
231</svg>
232</body>
233</html>