joshua
/
dingen
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

boole

main
Joshua Moerman 2 weeks ago
parent
7825e48781
commit
41db1950d4
2 changed files with 96 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      boole/index.html
  2. 3
      index.html

94
boole/index.html
View File

@ -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>

3
index.html
View File

@ -15,10 +15,11 @@ body {text-align: center; font-family: sans-serif; background: #faf;}
<li><a href="./baas/">BaaS: Bisimulation as a Service</a> <li><a href="./baas/">BaaS: Bisimulation as a Service</a>
<li><a href="./123bicategorie/">123bicategorie.nl: webshop for categorical products</a> <li><a href="./123bicategorie/">123bicategorie.nl: webshop for categorical products</a>
<li><a href="./rust-wasm/">Rust animation in the browser</a> <li><a href="./rust-wasm/">Rust animation in the browser</a>
<li><a href="./boole/">Boolean operations in svg animation</a>
</ul> </ul>
<footer style="color: #ffa"> <footer style="color: #ffa">
Copyright Joshua Moerman 2020 Copyright Joshua Moerman 2020 - 2021
</footer> </footer>
</body> </body>

Write Preview
Loading…
Cancel
Save