1<!DOCTYPE html>
2<html>
3<head>
4<style>
5 * { margin: 0; padding: 0; box-sizing: border-box; }
6 body {
7 background: #F5A800;
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 width: 100vw;
12 height: 100vh;
13 overflow: hidden;
14 }
15 .container {
16 position: relative;
17 width: 400px;
18 height: 350px;
19 }
20 #screwdriver-group {
21 transform-origin: center center;
22 animation: screwSpin 1.2s linear infinite;
23 }
24 @keyframes screwSpin {
25 0% { transform: scaleY(1); }
26 25% { transform: scaleY(0.15); }
27 50% { transform: scaleY(1); }
28 75% { transform: scaleY(0.15); }
29 100% { transform: scaleY(1); }
30 }
31</style>
32</head>
33<body>
34<svg viewBox="0 0 500 420" width="600" height="500" xmlns="http://www.w3.org/2000/svg">
35 <!-- Screwdriver -->
36 <g id="screwdriver-group" style="transform-box: fill-box; transform-origin: center center;">
37 <!-- Handle -->
38 <rect x="290" y="118" width="90" height="34" rx="5" fill="#333"/>
39 <rect x="295" y="124" width="80" height="22" rx="3" fill="#F5A800"/>
40 <rect x="295" y="124" width="80" height="5" rx="0" fill="#333"/>
41 <rect x="295" y="138" width="80" height="5" rx="0" fill="#333"/>
42 <!-- Shaft -->
43 <rect x="160" y="131" width="132" height="8" rx="2" fill="#333"/>
44 <!-- Tip (flat) -->
45 <polygon points="130,127 160,131 160,139 130,143" fill="#333"/>
46 <rect x="120" y="130" width="12" height="10" rx="1" fill="#333"/>
47 </g>
48
49 <!-- Drill body -->
50 <g transform="translate(240, 200)">
51 <!-- Main body -->
52 <path d="M60,0 L200,0 L200,80 L180,100 L60,100 Z" fill="#333" rx="5"/>
53 <!-- Top bump -->
54 <rect x="160" y="-15" width="50" height="20" rx="3" fill="#333"/>
55 <!-- Vent lines -->
56 <rect x="170" y="10" width="20" height="4" rx="1" fill="#F5A800"/>
57 <rect x="170" y="18" width="20" height="4" rx="1" fill="#F5A800"/>
58 <rect x="170" y="26" width="20" height="4" rx="1" fill="#F5A800"/>
59 <!-- Side detail lines -->
60 <rect x="155" y="15" width="8" height="4" rx="1" fill="#F5A800"/>
61 <rect x="155" y="23" width="8" height="4" rx="1" fill="#F5A800"/>
62 <rect x="155" y="31" width="8" height="4" rx="1" fill="#F5A800"/>
63 <!-- Circle detail -->
64 <circle cx="175" cy="60" r="10" fill="#F5A800"/>
65 <circle cx="175" cy="60" r="6" fill="#333"/>
66 <!-- Handle/grip -->
67 <path d="M60,80 L100,80 L110,160 L50,160 Z" fill="#333"/>
68 <!-- Battery -->
69 <rect x="45" y="155" width="75" height="30" rx="4" fill="#333"/>
70 <rect x="55" y="160" width="20" height="18" rx="2" fill="#F5A800"/>
71 <!-- Chuck -->
72 <rect x="20" y="35" width="45" height="30" rx="3" fill="#444"/>
73 <rect x="10" y="40" width="15" height="20" rx="2" fill="#444"/>
74 <!-- Drill bit -->
75 <line x1="-80" y1="50" x2="10" y2="50" stroke="#333" stroke-width="3"/>
76 <!-- Drill bit spiral -->
77 <path d="M-80,47 Q-70,44 -60,47 Q-50,50 -40,47 Q-30,44 -20,47 Q-10,50 0,47 Q5,45 10,47"
78 stroke="#333" stroke-width="2" fill="none"/>
79 <polygon points="-90,44 -80,47 -80,53 -90,56" fill="#333"/>
80 </g>
81
82 <!-- SVG TOOLS text -->
83 <text x="255" y="355" font-family="Arial Black, sans-serif" font-size="38" font-weight="900"
84 fill="#333" letter-spacing="2">SVG</text>
85 <text x="255" y="395" font-family="Arial Black, sans-serif" font-size="38" font-weight="900"
86 fill="#333" letter-spacing="2">TOOLS</text>
87</svg>
88
89<style>
90 #screwdriver-group {
91 animation: screwSpin 1s ease-in-out infinite;
92 }
93 @keyframes screwSpin {
94 0% { transform: scaleY(1); }
95 25% { transform: scaleY(0.1); }
96 50% { transform: scaleY(1); }
97 75% { transform: scaleY(0.1); }
98 100% { transform: scaleY(1); }
99 }
100</style>
101</svg>
102</body>
103</html>