Showing: full SVG
Concept Groups
yellow brushstroke: 0 4 5 6 9 10 11
uneven: 1 2 3 7 8 12
Elements — click to highlight
| # | Tag | Concept | Purity | Contributions |
|---|---|---|---|---|
| 0 | path |
yellow brushstroke |
0.500
|
0.941 0.940 |
| 1 | path |
uneven |
0.517
|
0.008 0.009 |
| 2 | path |
uneven |
0.525
|
0.021 0.024 |
| 3 | ellipse |
uneven |
0.536
|
0.000 0.001 |
| 4 | ellipse |
yellow brushstroke |
0.556
|
0.006 0.005 |
| 5 | circle |
yellow brushstroke |
0.540
|
0.004 0.004 |
| 6 | circle |
yellow brushstroke |
0.524
|
0.003 0.003 |
| 7 | circle |
uneven |
0.519
|
0.004 0.004 |
| 8 | circle |
uneven |
0.588
|
0.001 0.002 |
| 9 | circle |
yellow brushstroke |
0.521
|
0.002 0.002 |
| 10 | circle |
yellow brushstroke |
0.505
|
0.002 0.002 |
| 11 | circle |
yellow brushstroke |
0.525
|
0.005 0.004 |
| 12 | circle |
uneven |
0.510
|
0.002 0.002 |
SVG Code
<svg width="400" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="roughEdge" x="-5%" y="-20%" width="110%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<!-- Main brushstroke body -->
<path d="M 20 45
Q 30 38, 60 42
Q 100 35, 150 40
Q 200 32, 250 38
Q 300 34, 350 42
Q 370 40, 380 45
L 385 50
Q 375 58, 355 56
Q 300 65, 250 60
Q 200 68, 150 62
Q 100 67, 60 58
Q 35 62, 15 55
Z"
fill="#FFE500"
filter="url(#roughEdge)"/>
<!-- Additional texture layers -->
<path d="M 25 48
Q 50 42, 100 46
Q 180 38, 280 44
Q 340 40, 375 48
Q 360 52, 300 54
Q 200 58, 100 52
Q 50 56, 25 52
Z"
fill="#FFDD00"
opacity="0.7"
filter="url(#roughEdge)"/>
<!-- Highlight streak -->
<path d="M 40 46
Q 120 42, 200 44
Q 280 41, 340 46
Q 280 48, 200 47
Q 120 49, 40 47
Z"
fill="#FFF033"
opacity="0.6"/>
<!-- Edge texture details -->
<ellipse cx="30" cy="50" rx="12" ry="8" fill="#FFE500" filter="url(#roughEdge)"/>
<ellipse cx="375" cy="48" rx="10" ry="7" fill="#FFE500" filter="url(#roughEdge)"/>
<!-- Small texture bumps along edges -->
<circle cx="80" cy="38" r="4" fill="#FFE500" opacity="0.8"/>
<circle cx="160" cy="35" r="3" fill="#FFE500" opacity="0.7"/>
<circle cx="240" cy="36" r="4" fill="#FFE500" opacity="0.8"/>
<circle cx="320" cy="38" r="3" fill="#FFE500" opacity="0.7"/>
<circle cx="90" cy="62" r="4" fill="#FFE500" opacity="0.8"/>
<circle cx="180" cy="65" r="3" fill="#FFE500" opacity="0.7"/>
<circle cx="270" cy="63" r="4" fill="#FFE500" opacity="0.8"/>
<circle cx="350" cy="58" r="3" fill="#FFE500" opacity="0.7"/>
</svg>