49 lines
1.2 KiB
HTML
49 lines
1.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div style="position: relative; left: 27px; width: 100px;">
|
||
|
|
<div style="width: 50px;">
|
||
|
|
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<pattern id="pattern" width="100" height="100" patternUnits="userSpaceOnUse">
|
||
|
|
<circle cx="50" cy="50" r="50" fill="green"/>
|
||
|
|
</pattern>
|
||
|
|
|
||
|
|
<mask id="mask">
|
||
|
|
<circle cx="50" cy="50" r="50" fill="white"/>
|
||
|
|
</mask>
|
||
|
|
|
||
|
|
<clipPath id="clip">
|
||
|
|
<circle cx="50" cy="50" r="50"/>
|
||
|
|
<circle cx="50" cy="50" r="50"/>
|
||
|
|
</clipPath>
|
||
|
|
|
||
|
|
<filter id="filter">
|
||
|
|
<feOffset dx="0" dy="0"/>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<circle cx="50" cy="50" r="50" fill="green"/>
|
||
|
|
|
||
|
|
<g transform="translate(300)">
|
||
|
|
<rect width="100" height="100" fill="url(#pattern)"></rect>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(150 150)">
|
||
|
|
<rect width="100" height="100" fill="green" mask="url(#mask)"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(0 300)">
|
||
|
|
<rect width="100" height="100" fill="green" clip-path="url(#clip)"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(300 300)">
|
||
|
|
<circle cx="50" cy="50" r="50" fill="green" filter="url(#filter)"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|