<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        text {
            -webkit-font-smoothing: antialiased;
        }
    </style>

    <defs>
        <mask id="textMask">
            <rect width='100%' height='100%' fill='white'/>
            <text width='100%' height='100%' x='0' y='12'>This text should be sharp.</text>
        </mask>
    </defs>
    <rect width='200' height='100' fill='black'/>
    <rect width='200' height='100' fill='white' mask="url(#textMask)"/>

    <defs>
        <linearGradient id="blackGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(0,0,0);"/>
            <stop offset="100%" style="stop-color:rgb(0,0,0);"/>
        </linearGradient>
    </defs>
    <text x='0' y='36' fill="url(#blackGradient)">This text and the circles should also be sharp.</text>

    <defs>
        <clipPath id="circleClipPath" clipPathUnits="objectBoundingBox">
            <circle cx="0.25" cy="0.25" r="0.20"/>
            <circle cx="0.25" cy="0.75" r="0.20"/>
        </clipPath>
    </defs>
    <rect x="0" y="60" width="100" height="100" clip-path="url(#circleClipPath)"/>

    <defs>
        <pattern id="Pattern" width="1" height="1">
            <circle cx="25" cy="25" r="20" fill="url(#blackGradient)"/>
        </pattern>
    </defs>
    <rect fill="url(#Pattern)" x="0" y="162" width="200" height="200"/>
</svg>