Showing: full SVG
Concept Groups
left orange y with brown outline:
right orange exclamation mark with brown outline: 0 1 2 3
top-left corner of y:
inner yellow fill of o: 4
Elements — click to highlight
| # | Tag | Concept | Purity | Contributions |
|---|---|---|---|---|
| 0 | text |
right orange exclama |
0.322
|
0.150 0.202 0.147 0.129 |
| 1 | text |
right orange exclama |
0.360
|
0.001 0.002 0.001 0.001 |
| 2 | text |
right orange exclama |
0.302
|
0.001 0.001 0.001 0.001 |
| 3 | text |
right orange exclama |
0.288
|
0.126 0.152 0.132 0.118 |
| 4 | text |
inner yellow fill of |
0.265
|
0.722 0.643 0.719 0.751 |
SVG Code
<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
<!-- Define the font style -->
<style>
.yo-text {
font-family: "Impact", "Arial Black", sans-serif;
font-weight: bold;
font-size: 120px;
text-anchor: middle;
dominant-baseline: middle;
letter-spacing: 2px;
}
</style>
<!-- Background Layer: The 3D Shadow/Depth -->
<!-- We repeat the text with offsets to create a solid 3D extrusion effect -->
<text x="206" y="106" class="yo-text" fill="#D35400" stroke="#D35400" stroke-width="12" stroke-linejoin="round">YO!</text>
<text x="204" y="104" class="yo-text" fill="#D35400" stroke="#D35400" stroke-width="12" stroke-linejoin="round">YO!</text>
<text x="202" y="102" class="yo-text" fill="#D35400" stroke="#D35400" stroke-width="12" stroke-linejoin="round">YO!</text>
<!-- Middle Layer: The thick outline -->
<text x="200" y="100" class="yo-text" fill="#D35400" stroke="#D35400" stroke-width="12" stroke-linejoin="round">YO!</text>
<!-- Top Layer: The bright, light orange face of the letters -->
<text x="200" y="100" class="yo-text" fill="#FFCC33">YO!</text>
</svg>