2 changed files with 96 additions and 1 deletions
@ -0,0 +1,94 @@ |
|||
<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> |
|||
|
|||
Loading…
Reference in new issue