48 lines
2.1 KiB
XML
48 lines
2.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 360" width="520" height="360" role="img" aria-labelledby="t d">
|
|
<title id="t">Flan</title>
|
|
<desc id="d">A caramel flan held between two parentheses.</desc>
|
|
<defs>
|
|
<linearGradient id="custard" x1="0" y1="0" x2="0.15" y2="1">
|
|
<stop offset="0" stop-color="#FDEBBC"/>
|
|
<stop offset="0.5" stop-color="#F5D286"/>
|
|
<stop offset="1" stop-color="#DDA84D"/>
|
|
</linearGradient>
|
|
<linearGradient id="caramel" gradientUnits="userSpaceOnUse" x1="200" y1="122" x2="300" y2="248">
|
|
<stop offset="0" stop-color="#DE8C2A"/>
|
|
<stop offset="0.55" stop-color="#B96418"/>
|
|
<stop offset="1" stop-color="#8C4410"/>
|
|
</linearGradient>
|
|
<radialGradient id="sheen" cx="0.32" cy="0.28" r="0.55">
|
|
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0.6"/>
|
|
<stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<!-- the parens: tall, clearly punctuation, holding the flan between them -->
|
|
<g fill="none" stroke="#B96418" stroke-width="21" stroke-linecap="round">
|
|
<path d="M108 46 C 30 130, 30 232, 108 316"/>
|
|
<path d="M412 46 C 490 130, 490 232, 412 316"/>
|
|
</g>
|
|
|
|
<!-- sauce pooled under the flan -->
|
|
<ellipse cx="260" cy="286" rx="132" ry="20" fill="#9E5314"/>
|
|
|
|
<!-- custard body -->
|
|
<path d="M172 150 L150 268 A110 26 0 0 0 370 268 L348 150 Z" fill="url(#custard)"/>
|
|
<ellipse cx="260" cy="268" rx="110" ry="26" fill="#D9A94F"/>
|
|
|
|
<!-- caramel top -->
|
|
<ellipse cx="260" cy="150" rx="88" ry="25" fill="url(#caramel)"/>
|
|
|
|
<!-- three drips, tapering to a rounded tip and starting up inside the
|
|
glaze so they hang off the rim instead of floating below it -->
|
|
<g fill="url(#caramel)">
|
|
<path d="M181 146 C181 190 188 208 192 216 C196 208 203 186 203 136 Z"/>
|
|
<path d="M250 152 C250 210 257 238 262 246 C267 238 274 210 274 152 Z"/>
|
|
<path d="M322 144 C322 184 328 200 332 208 C336 200 342 184 342 144 Z"/>
|
|
</g>
|
|
|
|
<!-- highlight on the glaze -->
|
|
<ellipse cx="224" cy="143" rx="38" ry="10" fill="url(#sheen)"/>
|
|
</svg>
|