Showing: full SVG
Concept Groups
topmost light turquoise pill: 0 3 5
second pill from top with subtle gradient: 1 2
middle pill showing light blue center:
fourth pill from bottom with soft outline:
second pill from bottom with rounded ends:
bottommost pill with light gray border: 4 6 7 8 9 10 11 12
Elements — click to highlight
| # | Tag | Concept | Purity | Contributions |
|---|---|---|---|---|
| 0 | rect |
topmost light turquo |
0.217
|
0.092 0.090 0.079 0.080 0.083 0.000 |
| 1 | rect |
second pill from top |
0.217
|
0.091 0.094 0.078 0.083 0.086 0.000 |
| 2 | rect |
second pill from top |
0.208
|
0.089 0.089 0.077 0.086 0.088 0.000 |
| 3 | rect |
topmost light turquo |
0.221
|
0.091 0.085 0.077 0.077 0.081 0.000 |
| 4 | rect |
bottommost pill with |
0.235
|
0.090 0.085 0.076 0.076 0.082 0.125 |
| 5 | rect |
topmost light turquo |
0.221
|
0.090 0.083 0.076 0.076 0.083 0.000 |
| 6 | rect |
bottommost pill with |
0.283
|
0.000 0.080 0.077 0.075 0.082 0.124 |
| 7 | rect |
bottommost pill with |
0.237
|
0.093 0.076 0.076 0.077 0.083 0.126 |
| 8 | rect |
bottommost pill with |
0.247
|
0.092 0.066 0.078 0.073 0.070 0.124 |
| 9 | rect |
bottommost pill with |
0.293
|
0.000 0.072 0.078 0.078 0.075 0.126 |
| 10 | rect |
bottommost pill with |
0.239
|
0.092 0.071 0.077 0.079 0.080 0.125 |
| 11 | rect |
bottommost pill with |
0.260
|
0.089 0.060 0.075 0.072 0.061 0.126 |
| 12 | rect |
bottommost pill with |
0.273
|
0.091 0.049 0.077 0.068 0.045 0.124 |
SVG Code
<svg xmlns="http://www.w3.org/2000/svg" width="260" height="780" viewBox="0 0 260 780">
<defs>
<!-- Subtle vertical gradient: very light blue (top) to medium turquoise/cyan (bottom) -->
<linearGradient id="pillGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5fbff"/>
<stop offset="55%" stop-color="#d9f3fb"/>
<stop offset="100%" stop-color="#36c7d6"/>
</linearGradient>
</defs>
<!--
Step-by-Step Analysis (from description)
1) Transparent background: no background rect drawn.
2) Thirteen identical elongated pill shapes: same width/height and rounded corners.
3) Vertical stack: evenly spaced down the canvas, centered horizontally.
4) Each pill has a subtle top-to-bottom gradient (light blue to cyan).
5) Thin light gray border around each pill.
-->
<g fill="url(#pillGrad)" stroke="#cfcfcf" stroke-width="1">
<!-- Layout constants: x=30, width=200, height=44, rx=22, gap=14, top margin=20 -->
<rect x="30" y="20" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="78" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="136" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="194" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="252" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="310" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="368" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="426" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="484" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="542" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="600" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="658" width="200" height="44" rx="22" ry="22"/>
<rect x="30" y="716" width="200" height="44" rx="22" ry="22"/>
</g>
</svg>