| <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> |
