Revision control
Copy as Markdown
<mask id="myMask1">
<rect x="0" y="0" width="100" height="100" fill="white" />
<rect transform="rotate(45 50 50)" x="20" y="20" width="60" height="60" fill="black" />
</mask>
<mask id="myMask2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0.05" y="0.05" width="0.7" height="0.9">
<rect x="0" y="0" width="100" height="100" fill="white" />
<rect transform="rotate(45 50 50)" x="20" y="20" width="60" height="60" fill="black" />
</mask>
<mask id="myMask3" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" x="5" y="5" width="70" height="90">
<rect x="0" y="0" width="100" height="100" fill="white" />
<rect transform="rotate(45 50 50)" x="20" y="20" width="60" height="60" fill="black" />
</mask>
<mask id="myMask4" maskContentUnits="objectBoundingBox" maskUnits="objectBoundingBox" x="0.05" y="0.05" width="0.7" height="0.9">
<rect x="0" y="0" width="1" height="1" fill="white" />
<rect transform="rotate(45 0.5 0.5)" x="0.2" y="0.2" width="0.6" height="0.6" fill="black" />
</mask>
<mask id="myMask5" maskContentUnits="objectBoundingBox" maskUnits="userSpaceOnUse" x="5" y="5" width="70" height="90">
<rect x="0" y="0" width="1" height="1" fill="white" />
<rect transform="rotate(45 0.5 0.5)" x="0.2" y="0.2" width="0.6" height="0.6" fill="black" />
</mask>
<mask id="myMask6" transform="scale(0.8, 0.8)" maskContentUnits="objectBoundingBox" maskUnits="userSpaceOnUse" x="5" y="5" width="70" height="90">
<rect x="0" y="0" width="1" height="1" fill="white" />
<rect transform="rotate(45 0.5 0.5)" x="0.2" y="0.2" width="0.6" height="0.6" fill="black" />
</mask>
<circle transform="translate(0, 0)" cx="50" cy="50" r="50" mask="url(#myMask1)" />
<circle transform="translate(100, 0)" cx="50" cy="50" r="50" mask="url(#myMask2)" />
<circle transform="translate(200, 0)" cx="50" cy="50" r="50" mask="url(#myMask3)" />
<circle transform="translate(300, 0)" cx="50" cy="50" r="50" mask="url(#myMask4)" />
<circle transform="translate(400, 0)" cx="50" cy="50" r="50" mask="url(#myMask6)" />
<circle transform="translate(0, 100) scale(0.5 0.8)" cx="50" cy="50" r="50" mask="url(#myMask1)" />
<circle transform="translate(100, 100) scale(0.5 0.8)" cx="50" cy="50" r="50" mask="url(#myMask2)" />
<circle transform="translate(200, 100) scale(0.5 0.8)" cx="50" cy="50" r="50" mask="url(#myMask3)" />
<circle transform="translate(300, 100) scale(0.5 0.8)" cx="50" cy="50" r="50" mask="url(#myMask4)" />
<circle transform="translate(400, 100) scale(0.5 0.8)" cx="50" cy="50" r="50" mask="url(#myMask6)" />
<circle transform="translate(0, 200) scale(0.5 0.8) rotate(30 30 22.5)" cx="50" cy="50" r="50" mask="url(#myMask1)" />
<circle transform="translate(100, 200) scale(0.5 0.8) rotate(30 30 22.5)" cx="50" cy="50" r="50" mask="url(#myMask2)" />
<circle transform="translate(200, 200) scale(0.5 0.8) rotate(30 30 22.5)" cx="50" cy="50" r="50" mask="url(#myMask3)" />
<circle transform="translate(300, 200) scale(0.5 0.8) rotate(30 30 22.5)" cx="50" cy="50" r="50" mask="url(#myMask4)" />
<circle transform="translate(400, 200) scale(0.5 0.8) rotate(30 30 22.5)" cx="50" cy="50" r="50" mask="url(#myMask6)" />
</svg>