Showing: full SVG
Concept Groups
gear: 0 1 8 9 10 11 12 14 15 16 17 18
puzzle piece: 2 3 4 5 6 7 13
lightbulb: 19 20 21 22 23 24 25 26 27 28 29 30
Elements — click to highlight
| # | Tag | Concept | Purity | Contributions |
|---|---|---|---|---|
| 0 | rect |
gear |
1.000
|
0.000 0.000 0.000 |
| 1 | use |
gear |
1.000
|
0.000 0.000 0.000 |
| 2 | use |
puzzle piece |
0.865
|
0.000 0.001 0.000 |
| 3 | use |
puzzle piece |
0.827
|
0.003 0.013 0.000 |
| 4 | use |
puzzle piece |
0.847
|
0.002 0.013 0.000 |
| 5 | use |
puzzle piece |
0.634
|
0.012 0.021 0.000 |
| 6 | use |
puzzle piece |
0.649
|
0.011 0.021 0.000 |
| 7 | use |
puzzle piece |
0.859
|
0.001 0.009 0.000 |
| 8 | use |
gear |
1.000
|
0.000 0.000 0.000 |
| 9 | use |
gear |
1.000
|
0.000 0.000 0.000 |
| 10 | use |
gear |
1.000
|
0.000 0.000 0.000 |
| 11 | use |
gear |
1.000
|
0.000 0.000 0.000 |
| 12 | use |
gear |
1.000
|
0.000 0.000 0.000 |
| 13 | circle |
puzzle piece |
0.550
|
0.132 0.161 0.000 |
| 14 | circle |
gear |
0.541
|
0.134 0.114 0.000 |
| 15 | path |
gear |
0.523
|
0.079 0.072 0.000 |
| 16 | circle |
gear |
0.605
|
0.045 0.029 0.000 |
| 17 | path |
gear |
0.513
|
0.341 0.298 0.026 |
| 18 | path |
gear |
0.612
|
0.026 0.016 0.000 |
| 19 | path |
lightbulb |
0.698
|
0.074 0.095 0.391 |
| 20 | path |
lightbulb |
0.619
|
0.015 0.016 0.051 |
| 21 | path |
lightbulb |
0.597
|
0.006 0.006 0.017 |
| 22 | path |
lightbulb |
0.625
|
0.005 0.005 0.018 |
| 23 | path |
lightbulb |
0.662
|
0.004 0.003 0.013 |
| 24 | path |
lightbulb |
0.714
|
0.001 0.001 0.004 |
| 25 | path |
lightbulb |
0.752
|
0.040 0.043 0.251 |
| 26 | path |
lightbulb |
0.722
|
0.011 0.007 0.047 |
| 27 | path |
lightbulb |
0.747
|
0.009 0.008 0.048 |
| 28 | path |
lightbulb |
0.751
|
0.006 0.006 0.038 |
| 29 | path |
lightbulb |
0.509
|
0.027 0.029 0.058 |
| 30 | path |
lightbulb |
0.567
|
0.015 0.015 0.039 |
SVG Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
<!-- Background -->
<rect width="800" height="500" fill="#ffffff"/>
<defs>
<style>
.stroke { stroke:#0f4d3a; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.fillLite { fill:#cfeedd; stroke:#0f4d3a; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.fillLiteNoStroke { fill:#cfeedd; }
</style>
<!-- Gear teeth (single tooth) to be rotated -->
<path id="tooth" d="M0 -160 L22 -190 L-22 -190 Z" class="fillLite"/>
<!-- Small connector notch for gear -->
<path id="toothOutline" d="M0 -160 L22 -190 L-22 -190 Z" class="stroke"/>
</defs>
<!-- STEP-BY-STEP ANALYSIS (encoded as comments)
1) White background for clean minimalist look.
2) Left: a gear drawn as a ring with teeth, dark green outline, with a subtle light green fill accent on part of the gear.
3) Center: a puzzle piece outlined in dark green, slightly overlapping/engaging the gear.
4) Right: a lightbulb outlined in dark green, connected to the puzzle piece; bulb base lightly filled.
5) Overall: consistent line weight and rounded joins to match minimalist line art style.
-->
<!-- Gear group (left) -->
<g transform="translate(235 250)">
<!-- Teeth (filled lightly to show subtle fill on portion; alternating filled/outline) -->
<g>
<!-- 12 teeth around -->
<g transform="rotate(0)"><use href="#tooth"/></g>
<g transform="rotate(30)"><use href="#toothOutline"/></g>
<g transform="rotate(60)"><use href="#tooth"/></g>
<g transform="rotate(90)"><use href="#toothOutline"/></g>
<g transform="rotate(120)"><use href="#tooth"/></g>
<g transform="rotate(150)"><use href="#toothOutline"/></g>
<g transform="rotate(180)"><use href="#tooth"/></g>
<g transform="rotate(210)"><use href="#toothOutline"/></g>
<g transform="rotate(240)"><use href="#tooth"/></g>
<g transform="rotate(270)"><use href="#toothOutline"/></g>
<g transform="rotate(300)"><use href="#tooth"/></g>
<g transform="rotate(330)"><use href="#toothOutline"/></g>
</g>
<!-- Outer ring -->
<circle r="145" class="stroke"/>
<!-- Inner ring -->
<circle r="85" class="stroke"/>
<!-- Subtle light green fill accent on a portion of the gear ring -->
<path d="M 0 -145
A 145 145 0 0 1 125 -70
L 72 -40
A 85 85 0 0 0 0 -85
Z" class="fillLite"/>
<!-- Center hub -->
<circle r="22" class="stroke"/>
</g>
<!-- Puzzle piece (center) -->
<g transform="translate(380 250)">
<!-- Main puzzle body -->
<path class="stroke"
d="M -110 -70
H -40
C -40 -95 -10 -105 5 -85
C 20 -65 10 -35 -15 -35
C -30 -35 -40 -45 -40 -60
V -70
H 80
V -10
C 105 -10 115 20 95 35
C 75 50 50 40 50 15
C 50 0 60 -10 80 -10
V 80
H 20
C 20 55 -10 45 -25 65
C -40 85 -20 110 5 100
C 20 95 20 85 20 80
H -110
V 20
C -85 20 -75 -10 -95 -25
C -115 -40 -140 -20 -130 5
C -125 20 -115 20 -110 20
Z"/>
<!-- Small interaction overlap line toward gear (suggests engagement) -->
<path class="stroke" d="M -120 -10 C -165 -20 -175 -5 -190 10"/>
</g>
<!-- Lightbulb (right) connected to puzzle piece -->
<g transform="translate(585 245)">
<!-- Bulb glass -->
<path class="stroke"
d="M 0 -120
C 70 -120 120 -70 120 -5
C 120 45 92 75 65 98
C 50 110 45 125 45 140
H -45
C -45 125 -50 110 -65 98
C -92 75 -120 45 -120 -5
C -120 -70 -70 -120 0 -120
Z"/>
<!-- Filament -->
<path class="stroke" d="M -35 10 C -10 -10 10 -10 35 10"/>
<path class="stroke" d="M -18 10 L -18 32"/>
<path class="stroke" d="M 18 10 L 18 32"/>
<!-- Bulb neck -->
<path class="stroke" d="M -55 140 H 55"/>
<path class="stroke" d="M -50 160 H 50"/>
<!-- Base (light green fill) -->
<path class="fillLite"
d="M -60 160
H 60
V 215
C 60 235 40 250 20 250
H -20
C -40 250 -60 235 -60 215
Z"/>
<!-- Base ridges -->
<path class="stroke" d="M -45 178 H 45"/>
<path class="stroke" d="M -45 196 H 45"/>
<path class="stroke" d="M -35 214 H 35"/>
<!-- Connector from puzzle piece to bulb (implied attachment) -->
<path class="stroke" d="M -160 35 C -120 10 -95 0 -70 5 C -45 10 -30 25 -15 45"/>
</g>
<!-- Small link tab between puzzle and bulb for clearer connection -->
<path class="stroke" d="M 470 270 C 505 255 525 245 555 245"/>
</svg>