Showing: full SVG
Concept Groups
right speaker with teal and pink rings: 27 28 29 30 31 32 33 34 35 36 37 38 42 43 44 45 48 49 50 51 52 53 54 55
central green equalizer bar: 15 16 17 18 19 20 21 22 23 24 25 26
yellow rectangular buttons above equalizer: 5 6 7 8 9 10 11 12 13 14 41 46 47
purple outer frame: 0 1 2 3 4 39 40 56 57
Elements — click to highlight
| # | Tag | Concept | Purity | Contributions |
|---|---|---|---|---|
| 0 | path |
purple outer frame |
0.737
|
0.000 0.000 0.047 0.133 |
| 1 | path |
purple outer frame |
0.726
|
0.000 0.000 0.014 0.038 |
| 2 | rect |
purple outer frame |
0.769
|
0.000 0.000 0.091 0.302 |
| 3 | rect |
purple outer frame |
0.524
|
0.025 0.000 0.072 0.106 |
| 4 | rect |
purple outer frame |
0.538
|
0.009 0.000 0.082 0.106 |
| 5 | rect |
yellow rectangular b |
0.972
|
0.000 0.000 0.005 0.000 |
| 6 | rect |
yellow rectangular b |
0.998
|
0.000 0.000 0.007 0.000 |
| 7 | rect |
yellow rectangular b |
1.000
|
0.000 0.000 0.009 0.000 |
| 8 | rect |
yellow rectangular b |
1.000
|
0.000 0.000 0.009 0.000 |
| 9 | rect |
yellow rectangular b |
1.000
|
0.000 0.000 0.009 0.000 |
| 10 | rect |
yellow rectangular b |
1.000
|
0.000 0.000 0.009 0.000 |
| 11 | rect |
yellow rectangular b |
1.000
|
0.000 0.000 0.009 0.000 |
| 12 | rect |
yellow rectangular b |
0.985
|
0.000 0.000 0.006 0.000 |
| 13 | circle |
yellow rectangular b |
0.998
|
0.000 0.000 0.003 0.000 |
| 14 | circle |
yellow rectangular b |
0.985
|
0.000 0.000 0.003 0.000 |
| 15 | rect |
central green equali |
0.809
|
0.001 0.068 0.015 0.000 |
| 16 | rect |
central green equali |
0.856
|
0.004 0.245 0.036 0.001 |
| 17 | rect |
central green equali |
0.948
|
0.000 0.018 0.001 0.000 |
| 18 | rect |
central green equali |
0.955
|
0.000 0.066 0.003 0.000 |
| 19 | rect |
central green equali |
0.955
|
0.000 0.096 0.004 0.000 |
| 20 | rect |
central green equali |
0.955
|
0.000 0.072 0.003 0.000 |
| 21 | rect |
central green equali |
0.954
|
0.000 0.056 0.003 0.000 |
| 22 | rect |
central green equali |
0.955
|
0.000 0.087 0.004 0.000 |
| 23 | rect |
central green equali |
0.955
|
0.000 0.110 0.005 0.000 |
| 24 | rect |
central green equali |
0.956
|
0.000 0.067 0.003 0.000 |
| 25 | rect |
central green equali |
0.956
|
0.000 0.047 0.002 0.000 |
| 26 | rect |
central green equali |
0.956
|
0.000 0.067 0.003 0.000 |
| 27 | circle |
right speaker with t |
0.462
|
0.128 0.000 0.061 0.088 |
| 28 | circle |
right speaker with t |
0.676
|
0.113 0.000 0.054 0.001 |
| 29 | circle |
right speaker with t |
0.675
|
0.065 0.000 0.031 0.000 |
| 30 | circle |
right speaker with t |
0.675
|
0.080 0.000 0.038 0.000 |
| 31 | circle |
right speaker with t |
0.467
|
0.019 0.000 0.009 0.013 |
| 32 | circle |
right speaker with t |
0.596
|
0.007 0.000 0.003 0.001 |
| 33 | circle |
right speaker with t |
0.453
|
0.123 0.001 0.060 0.088 |
| 34 | circle |
right speaker with t |
0.684
|
0.113 0.000 0.052 0.001 |
| 35 | circle |
right speaker with t |
0.684
|
0.065 0.000 0.030 0.000 |
| 36 | circle |
right speaker with t |
0.683
|
0.080 0.000 0.037 0.000 |
| 37 | circle |
right speaker with t |
0.468
|
0.019 0.000 0.009 0.013 |
| 38 | circle |
right speaker with t |
0.543
|
0.007 0.000 0.003 0.003 |
| 39 | rect |
purple outer frame |
0.451
|
0.031 0.000 0.052 0.068 |
| 40 | rect |
purple outer frame |
0.541
|
0.000 0.000 0.025 0.030 |
| 41 | rect |
yellow rectangular b |
0.582
|
0.004 0.000 0.010 0.003 |
| 42 | circle |
right speaker with t |
0.657
|
0.021 0.000 0.011 0.000 |
| 43 | circle |
right speaker with t |
0.656
|
0.021 0.000 0.011 0.000 |
| 44 | circle |
right speaker with t |
0.663
|
0.002 0.000 0.001 0.000 |
| 45 | circle |
right speaker with t |
0.654
|
0.002 0.000 0.001 0.000 |
| 46 | path |
yellow rectangular b |
0.969
|
0.000 0.000 0.003 0.000 |
| 47 | path |
yellow rectangular b |
0.987
|
0.000 0.000 0.011 0.000 |
| 48 | rect |
right speaker with t |
0.509
|
0.002 0.000 0.002 0.000 |
| 49 | rect |
right speaker with t |
0.557
|
0.002 0.000 0.002 0.000 |
| 50 | path |
right speaker with t |
0.626
|
0.007 0.000 0.004 0.001 |
| 51 | path |
right speaker with t |
0.647
|
0.011 0.000 0.005 0.001 |
| 52 | path |
right speaker with t |
0.683
|
0.011 0.000 0.005 0.000 |
| 53 | path |
right speaker with t |
0.636
|
0.008 0.000 0.003 0.001 |
| 54 | path |
right speaker with t |
0.697
|
0.011 0.000 0.005 0.000 |
| 55 | path |
right speaker with t |
0.694
|
0.011 0.000 0.005 0.000 |
| 56 | path |
purple outer frame |
0.754
|
0.000 0.000 0.000 0.000 |
| 57 | path |
purple outer frame |
0.768
|
0.000 0.000 0.000 0.000 |
SVG Code
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="520" viewBox="0 0 900 520">
<!-- Transparent background by default -->
<!-- Neon palette -->
<defs>
<style>
.outline { fill: none; stroke: #7a2cff; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.outline2 { fill: none; stroke: #7a2cff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.teal { fill: #23f6d6; }
.pink { fill: #ff4fd8; }
.yellow { fill: #ffe84a; }
.dark { fill: rgba(0,0,0,0); }
</style>
<!-- subtle glow via filter (kept light to stay crisp) -->
<filter id="glowPurple" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.2" result="b"/>
<feColorMatrix in="b" type="matrix"
values="0 0 0 0 0.48
0 0 0 0 0.17
0 0 0 0 1
0 0 0 0.9 0" result="c"/>
<feMerge>
<feMergeNode in="c"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="glowTeal" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.0" result="b"/>
<feColorMatrix in="b" type="matrix"
values="0 0 0 0 0.14
0 0 0 0 0.96
0 0 0 0 0.84
0 0 0 0.85 0" result="c"/>
<feMerge>
<feMergeNode in="c"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="glowPink" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.0" result="b"/>
<feColorMatrix in="b" type="matrix"
values="0 0 0 0 1
0 0 0 0 0.31
0 0 0 0 0.85
0 0 0 0.85 0" result="c"/>
<feMerge>
<feMergeNode in="c"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="glowYellow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="1.8" result="b"/>
<feColorMatrix in="b" type="matrix"
values="0 0 0 0 1
0 0 0 0 0.91
0 0 0 0 0.29
0 0 0 0.85 0" result="c"/>
<feMerge>
<feMergeNode in="c"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Step-by-step analysis (embedded as SVG comments)
1) Overall object: retro boombox centered, strong thick purple outline.
2) Two large circular speakers left/right: teal + pink rings and inner details.
3) Central panel: cassette deck with two pink reels and window.
4) Equalizer display above cassette: teal bars/graph in a rectangular frame.
5) Top row: small yellow buttons/knobs across the top for 80s vibe.
6) Add handle and small accent lines, all neon outlined, on transparent background.
-->
<g filter="url(#glowPurple)">
<!-- Handle -->
<path class="outline" d="M270 120
Q450 40 630 120
L630 165
Q450 95 270 165 Z"/>
<path class="outline2" d="M305 130 Q450 70 595 130" opacity="0.9"/>
<!-- Main body -->
<rect x="120" y="150" width="660" height="300" rx="38" class="outline"/>
<!-- Inner border -->
<rect x="155" y="185" width="590" height="230" rx="28" class="outline2" opacity="0.9"/>
<!-- Top control strip -->
<rect x="180" y="195" width="540" height="55" rx="16" class="outline2" opacity="0.95"/>
</g>
<!-- Yellow buttons along the top -->
<g filter="url(#glowYellow)">
<g>
<rect x="205" y="210" width="46" height="22" rx="8" class="yellow"/>
<rect x="262" y="210" width="46" height="22" rx="8" class="yellow"/>
<rect x="319" y="210" width="46" height="22" rx="8" class="yellow"/>
<rect x="376" y="210" width="46" height="22" rx="8" class="yellow"/>
<rect x="433" y="210" width="46" height="22" rx="8" class="yellow"/>
<rect x="490" y="210" width="46" height="22" rx="8" class="yellow"/>
<rect x="547" y="210" width="46" height="22" rx="8" class="yellow"/>
<rect x="604" y="210" width="46" height="22" rx="8" class="yellow"/>
</g>
<!-- small knobs -->
<circle cx="690" cy="221" r="12" class="yellow"/>
<circle cx="720" cy="221" r="12" class="yellow"/>
</g>
<!-- Equalizer display (teal) -->
<g filter="url(#glowTeal)">
<rect x="330" y="260" width="240" height="60" rx="14" class="teal" opacity="0.18"/>
<rect x="330" y="260" width="240" height="60" rx="14" fill="none" stroke="#23f6d6" stroke-width="8" stroke-linejoin="round"/>
<!-- Bars -->
<g>
<rect x="352" y="298" width="12" height="18" class="teal"/>
<rect x="372" y="288" width="12" height="28" class="teal"/>
<rect x="392" y="276" width="12" height="40" class="teal"/>
<rect x="412" y="286" width="12" height="30" class="teal"/>
<rect x="432" y="292" width="12" height="24" class="teal"/>
<rect x="452" y="280" width="12" height="36" class="teal"/>
<rect x="472" y="270" width="12" height="46" class="teal"/>
<rect x="492" y="288" width="12" height="28" class="teal"/>
<rect x="512" y="296" width="12" height="20" class="teal"/>
<rect x="532" y="284" width="12" height="32" class="teal"/>
</g>
</g>
<!-- Speakers -->
<g>
<!-- Left speaker -->
<g transform="translate(0,0)">
<g filter="url(#glowPurple)">
<circle cx="250" cy="335" r="105" class="outline"/>
</g>
<g filter="url(#glowTeal)">
<circle cx="250" cy="335" r="88" fill="none" stroke="#23f6d6" stroke-width="12"/>
<circle cx="250" cy="335" r="60" fill="none" stroke="#23f6d6" stroke-width="10" opacity="0.85"/>
</g>
<g filter="url(#glowPink)">
<circle cx="250" cy="335" r="74" fill="none" stroke="#ff4fd8" stroke-width="12"/>
<circle cx="250" cy="335" r="22" class="pink" opacity="0.95"/>
</g>
<g filter="url(#glowTeal)">
<circle cx="250" cy="335" r="10" class="teal"/>
</g>
</g>
<!-- Right speaker -->
<g transform="translate(0,0)">
<g filter="url(#glowPurple)">
<circle cx="650" cy="335" r="105" class="outline"/>
</g>
<g filter="url(#glowTeal)">
<circle cx="650" cy="335" r="88" fill="none" stroke="#23f6d6" stroke-width="12"/>
<circle cx="650" cy="335" r="60" fill="none" stroke="#23f6d6" stroke-width="10" opacity="0.85"/>
</g>
<g filter="url(#glowPink)">
<circle cx="650" cy="335" r="74" fill="none" stroke="#ff4fd8" stroke-width="12"/>
<circle cx="650" cy="335" r="22" class="pink" opacity="0.95"/>
</g>
<g filter="url(#glowTeal)">
<circle cx="650" cy="335" r="10" class="teal"/>
</g>
</g>
</g>
<!-- Central cassette deck -->
<g>
<g filter="url(#glowPurple)">
<rect x="320" y="330" width="260" height="110" rx="18" class="outline2"/>
<rect x="350" y="350" width="200" height="70" rx="14" class="outline2" opacity="0.9"/>
</g>
<!-- Cassette window tint -->
<g filter="url(#glowTeal)">
<rect x="350" y="350" width="200" height="70" rx="14" class="teal" opacity="0.10"/>
</g>
<!-- Reels (pink) -->
<g filter="url(#glowPink)">
<circle cx="405" cy="385" r="22" fill="none" stroke="#ff4fd8" stroke-width="10"/>
<circle cx="495" cy="385" r="22" fill="none" stroke="#ff4fd8" stroke-width="10"/>
<circle cx="405" cy="385" r="6" class="pink"/>
<circle cx="495" cy="385" r="6" class="pink"/>
<!-- tape line -->
<path d="M427 385 L473 385" fill="none" stroke="#ff4fd8" stroke-width="8" stroke-linecap="round"/>
</g>
<!-- Small teal accents -->
<g filter="url(#glowTeal)">
<path d="M370 412 Q450 438 530 412" fill="none" stroke="#23f6d6" stroke-width="8" stroke-linecap="round"/>
<rect x="378" y="360" width="18" height="10" rx="4" class="teal" opacity="0.85"/>
<rect x="504" y="360" width="18" height="10" rx="4" class="teal" opacity="0.85"/>
</g>
</g>
<!-- Extra neon details -->
<g filter="url(#glowPurple)" opacity="0.95">
<!-- small side vents -->
<path class="outline2" d="M165 270 h55"/>
<path class="outline2" d="M165 295 h55"/>
<path class="outline2" d="M165 320 h55"/>
<path class="outline2" d="M680 270 h55"/>
<path class="outline2" d="M680 295 h55"/>
<path class="outline2" d="M680 320 h55"/>
<!-- base feet -->
<path class="outline2" d="M210 450 h70"/>
<path class="outline2" d="M620 450 h70"/>
</g>
</svg>