63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
border: 2em blue solid;
|
|
}
|
|
svg {
|
|
background: pink;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<clippath id="clip1">
|
|
<rect width="8" height="4"></rect>
|
|
</clippath>
|
|
<g clip-path="url(#clip1)">
|
|
<circle cx="1" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="1" cy="7" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="7" r="1" fill="green"></circle>
|
|
</g>
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<clippath id="clip2">
|
|
<rect y="4" width="8" height="4"></rect>
|
|
</clippath>
|
|
<g clip-path="url(#clip2)">
|
|
<circle cx="1" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="1" cy="7" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="7" r="1" fill="green"></circle>
|
|
</g>
|
|
</svg>
|
|
<br>
|
|
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<clippath id="clip3">
|
|
<rect width="8" height="2"></rect>
|
|
<rect y="4" width="8" height="2"></rect>
|
|
</clippath>
|
|
<g clip-path="url(#clip3)">
|
|
<circle cx="1" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="1" cy="7" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="7" r="1" fill="green"></circle>
|
|
</g>
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<clippath id="clip4">
|
|
<rect y="2" width="8" height="2"></rect>
|
|
<rect y="6" width="8" height="2"></rect>
|
|
</clippath>
|
|
<g clip-path="url(#clip4)">
|
|
<circle cx="1" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="1" r="1" fill="green"></circle>
|
|
<circle cx="1" cy="7" r="1" fill="green"></circle>
|
|
<circle cx="7" cy="7" r="1" fill="green"></circle>
|
|
</g>
|
|
</svg>
|
|
</body>
|
|
</html>
|