40 lines
1.4 KiB
XML
40 lines
1.4 KiB
XML
<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>
|