Files

56 lines
2.4 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
<defs>
<clipPath id="cp">
<rect x="250" y="50" width="100" height="225" rx="50"/>
</clipPath>
</defs>
<!-- Teal pill — fanned left: translate(-10,0) translate(300,275) rotate(-55) translate(-300,-275) -->
<g transform="translate(-10,0) translate(300,275) rotate(-55) translate(-300,-275)">
<g transform="translate(250,50)">
<rect width="100" height="225" rx="50" fill="#0E7A7D"/>
<g transform="translate(21,50) scale(0.6)">
<path d="M25 70 V0 H55 C80 0 80 35 55 35 H25 M55 35 L85 70 M53 67 L87 38" stroke="white" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" fill="none"/>
</g>
</g>
</g>
<!-- Green pill — fanned right: translate(10,0) translate(300,275) rotate(55) translate(-300,-275) -->
<g transform="translate(10,0) translate(300,275) rotate(55) translate(-300,-275)">
<g transform="translate(250,50)">
<rect width="100" height="225" rx="50" fill="#109E6C"/>
<g transform="translate(22.5,50) scale(0.5)">
<rect x="0" y="60" width="20" height="40" fill="white"/>
<rect x="30" y="40" width="20" height="60" fill="white"/>
<rect x="60" y="20" width="20" height="80" fill="white"/>
<rect x="90" y="0" width="20" height="100" fill="white"/>
</g>
</g>
</g>
<!-- Amber pill — center (no fan) -->
<g transform="translate(250,50)">
<rect width="100" height="225" rx="50" fill="#E38B16"/>
<g transform="translate(25,50) scale(0.6)">
<path d="M10 0 L50 30 L10 60" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<line x1="55" y1="65" x2="85" y2="65" stroke="white" stroke-width="10" stroke-linecap="round"/>
</g>
</g>
<!-- Blend overlays clipped to center pill -->
<g clip-path="url(#cp)">
<g transform="translate(-10,0) translate(300,275) rotate(-55) translate(-300,-275)" style="mix-blend-mode:multiply" opacity="0.3">
<g transform="translate(250,50)">
<rect width="100" height="225" rx="50" fill="#0E7A7D"/>
</g>
</g>
</g>
<g clip-path="url(#cp)">
<g transform="translate(10,0) translate(300,275) rotate(55) translate(-300,-275)" style="mix-blend-mode:multiply" opacity="0.3">
<g transform="translate(250,50)">
<rect width="100" height="225" rx="50" fill="#109E6C"/>
</g>
</g>
</g>
</svg>