You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.4 KiB
94 lines
3.4 KiB
<html>
|
|
<head>
|
|
<style>
|
|
.txt {
|
|
font-family: sans-serif;
|
|
text-anchor: middle;
|
|
dominant-baseline: auto;
|
|
}
|
|
.move {
|
|
offset-path: path('m 0,0 60,0');
|
|
offset-distance: 0%;
|
|
animation: moveanim 3s ease-in-out alternate infinite;
|
|
}
|
|
|
|
@keyframes moveanim {
|
|
from { offset-distance: 0%; }
|
|
10% { offset-distance: 0%; }
|
|
90% { offset-distance: 100%; }
|
|
to { offset-distance: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="120px">
|
|
<defs>
|
|
<pattern id="a" viewBox="0,0,8,8" width="10%" height="10%">
|
|
<line x1="0" y1="0" x2="8" y2="0" stroke="black"/>
|
|
</pattern>
|
|
<pattern id="b" viewBox="0,0,8,8" width="10%" height="10%" patternTransform="rotate(-20)">
|
|
<line x1="0" y1="0" x2="8" y2="0" stroke="black"/>
|
|
</pattern>
|
|
<clipPath id="cut-out">
|
|
<circle class="stay" cx="50" cy="50" r="40"/>
|
|
<circle class="move" cx="60" cy="50" r="40"/>
|
|
</clipPath>
|
|
<clipPath id="cut-out-outset">
|
|
<circle class="stay" cx="50" cy="50" r="42"/>
|
|
<circle class="move" cx="60" cy="50" r="42"/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<rect width="200" height="100" style="fill:#000;stroke:#000;stroke-width:3px" clip-path="url(#cut-out-outset)" />
|
|
<rect width="200" height="100" style="fill:#5f468a;stroke:#000;stroke-width:3px" clip-path="url(#cut-out)" />
|
|
|
|
<circle cx="60" cy="50" r="40" fill="url(#b)" stroke="#000" stroke-width="1" class="move"/>
|
|
<circle cx="50" cy="50" r="40" fill="url(#a)" stroke="#000" stroke-width="1"/>
|
|
|
|
<text x="50" y="110" class="txt">A</text>
|
|
<text x="60" y="110" class="txt move">B</text>
|
|
</svg>
|
|
<br/>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="120px">
|
|
<defs>
|
|
<clipPath id="cut-out2">
|
|
<circle class="move" cx="60" cy="50" r="40"/>
|
|
</clipPath>
|
|
<clipPath id="cut-out-outset2">
|
|
<circle class="move" cx="60" cy="50" r="42"/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<circle cx="50" cy="50" r="40" style="fill:#000;stroke:#000;stroke-width:3px" clip-path="url(#cut-out-outset2)" />
|
|
<circle cx="50" cy="50" r="40" style="fill:#4ba6df;stroke:#000;stroke-width:3px" clip-path="url(#cut-out2)" />
|
|
|
|
<circle cx="60" cy="50" r="40" fill="url(#b)" stroke="#000" stroke-width="1" class="move"/>
|
|
<circle cx="50" cy="50" r="40" fill="url(#a)" stroke="#000" stroke-width="1"/>
|
|
|
|
<text x="50" y="110" class="txt">A</text>
|
|
<text x="60" y="110" class="txt move">B</text>
|
|
</svg>
|
|
<br/>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="120px">
|
|
<defs>
|
|
<mask id="myMask">
|
|
<rect x="0" y="0" width="100" height="100" fill="white" />
|
|
<circle class="move" cx="60" cy="50" r="40" fill="black"/>
|
|
</mask>
|
|
<mask id="myMask-outset">
|
|
<rect x="0" y="0" width="100" height="100" fill="white" />
|
|
<circle class="move" cx="60" cy="50" r="42" fill="black"/>
|
|
</mask>
|
|
</defs>
|
|
|
|
<circle cx="50" cy="50" r="40" style="fill:#000;stroke:#000;stroke-width:3px" mask="url(#myMask)" />
|
|
<circle cx="50" cy="50" r="40" style="fill:#459c45;stroke:#000;stroke-width:3px" mask="url(#myMask-outset)" />
|
|
|
|
<circle cx="60" cy="50" r="40" fill="url(#b)" stroke="#000" stroke-width="1" class="move"/>
|
|
<circle cx="50" cy="50" r="40" fill="url(#a)" stroke="#000" stroke-width="1"/>
|
|
|
|
<text x="50" y="110" class="txt">A</text>
|
|
<text x="60" y="110" class="txt move">B</text>
|
|
</svg>
|
|
</html>
|
|
|
|
|