Revision control
Copy as Markdown
<mask x="0.1" y="0.1" width="0.8" height="0.8" id="myMask">
<!-- Everything under a white pixel will be visible -->
<g>
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black" />
</g>
</mask>
<mask x="0" y="0" width="0.5" height="1" id="myMask2">
<!-- Everything under a white pixel will be visible -->
<g>
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black" />
</g>
</mask>
<polygon points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(110, 0)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(220, 0)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(330, 0)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(440, 0)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(0, 110)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(110, 110)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(220, 110)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(330, 110)" points="-10,110 110,110 110,-10" fill="orange" />
<polygon transform="translate(440, 110)" points="-10,110 110,110 110,-10" fill="orange" />
<!-- with this mask applied, we "punch" a heart shape hole into the circle -->
<rect transform="translate(0, 0)" x="0" y="0" width="100" height="100" opacity="0.5" mask="url(#myMask)" />
<circle transform="translate(110, 0)" cx="50" cy="50" r="50" mask="url(#myMask)" />
<ellipse transform="translate(220, 0)" cx="50" cy="50" rx="40" ry="70" mask="url(#myMask)" />
<line transform="translate(330, 0)" x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" mask="url(#myMask)" />
<polygon transform="translate(440, 0)" points="-10,110 -10,-10 110,110" fill="green" mask="url(#myMask)" />
<polyline transform="translate(0, 110)" points="10,90 10,10 90,90, 10,90" style="fill:none;stroke:black;stroke-width:3" mask="url(#myMask)" />
<path transform="translate(110, 110)" d="M10,90 L10,10 L90,90, Z" fill="black" mask="url(#myMask)" />
<text transform="translate(220, 110)" fill="blue" x="0" y="20" mask="url(#myMask)" font-family="Arial" font-size="16"> Stupid SVG! </text>
<g transform="translate(330, 110)" mask="url(#myMask)">
<rect x="5" y="10" width="40" height="80" />
<ellipse cx="75" cy="50" ry="40" rx="20" />
</g>
<rect transform="translate(440, 110)" x="0" y="0" width="100" height="100" fill="yellow" />
<rect transform="translate(440, 110)" x="0" y="0" width="100" height="100" fill="red" mask="url(#myMask)" />
<rect transform="translate(440, 110)" x="0" y="0" width="100" height="100" fill="blue" mask="url(#myMask2)" />
<rect transform="translate(440, 110)" x="0" y="0" width="50" height="100" fill="green" mask="url(#myMask)" />
</svg>