Venn diagram SVG icons

HTML

<svg width="21" height="21"
     xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
     role="img" aria-label="More like this">
    <title>More like this</title>
    <defs>
        <mask id="overlap1">
            <rect x="0" y="0" width="21" height="21" fill="black"/>
            <circle r="7" cx="7.5" cy="10.5" fill="black" stroke="white"></circle>
            <circle r="7" cx="13.5" cy="10.5" fill="white"></circle>
        </mask>
        <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
            <path d="M-1,1 l2,-2
                     M0,4 l4,-4
                     M3,5 l2,-2" 
                  style="stroke: #A00893; stroke-width: 1" />
        </pattern>
    </defs>
    <g>
        <circle r="7" cx="7.5" cy="10.5" fill="url(#diagonalHatch)" stroke="#A00893" mask="url(#overlap1)"></circle>
        <circle r="7" cx="13.5" cy="10.5" fill="none" stroke="#A00893"></circle>
    </g>
</svg>

<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
     role="img" aria-label="More like this">
    <title>More like this</title>
    <defs>
        <mask id="overlap2">
            <rect x="0" y="0" width="21" height="21" fill="black"/>
            <circle r="5.5" cx="7.5" cy="10.5" fill="black" stroke="white"></circle>
            <circle r="5.5" cx="13.5" cy="10.5" fill="white"></circle>
        </mask>
    </defs>
    <g>
        <circle r="5.5" cx="7.5" cy="10.5" fill="#A00893" stroke="#A00893" mask="url(#overlap2)"></circle>
        <circle r="5.5" cx="13.5" cy="10.5" fill="none" stroke="#A00893"></circle>
    </g>
</svg>

<svg width="100" height="100"
     xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
     role="img" aria-label="More like this">
    <title>More like this</title>
    <g>
        <circle r="5.5" cx="7.5" cy="10.5" fill="none" stroke="#A00893"></circle>
        <circle r="5.5" cx="13.5" cy="10.5" fill="none"...

CSS

svg {
  display: block;
  margin: 10px;
  zoom: 1;
  font-size:122px;
}