JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<svg width="266px" height="400px" viewBox="0 0 266 400">
    <defs>
        <polyline id="triangle" fill="#509A2B" points="0,133 133,0 266,133"/>
        <rect id="rectangle" x="133" fill="#E27532" width="133" height="400"/>
        <path id="semicircle" fill="#D34A20" d="M266,267c0,73.454-59.546,133-133,133S0,340.454,0,267"/>
        <filter id="blendit">
            <feImage xlink:href="#triangle" x="0" y="0" result="1"/>
            <feImage xlink:href="#rectangle" x="0" y="0" result="2"/>
            <feImage xlink:href="#semicircle" x="0" y="0" result="3"/>
            <feBlend mode="multiply" in="1" in2="2" result="12"/>
            <feBlend mode="multiply" in="12" in2="3" result="123"/>
         </filter>
    </defs>
    <rect x="0" y="0" width="266" height="400" filter="url(#blendit)"/>
</svg>