-
Notifications
You must be signed in to change notification settings - Fork 2
/
slice.html
24 lines (21 loc) · 2.93 KB
/
slice.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<svg width="273" height="156" viewBox="-235 -156 470 312" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="overflow: visible;">
<!-- SVG is scaled 1,1.1625 in order to make stroke thickness match logo font
which is thicker on vertical lines than horizontal -->
<path fill="none" stroke="#3f4349" stroke-width="44" stroke-linejoin="round" d="M 200 0 L 44 0 C 20 0 0 20 0 44 L 0 172" />
<path fill="none" stroke="#3f4349" stroke-width="44" stroke-linejoin="round" d="M -200 0 L -44 0 C -20 0 0 -20 0 -44 L 0 -172" />
<path transform="translate(60 40)" fill="#3e5f9b" fill-rule="evenodd" stroke="none" d="M 49.009399 154 C 49.009399 119.622559 32.564209 102 0 102 L 0 52 C 32.564209 52 49.009399 34.377441 49.009399 0 L 92 0 C 92 21.558838 88.093262 40.567627 78.825073 53.094971 C 69.556885 65.622559 55.86731 72 37.831787 72 L 35.252319 72 L 35.252319 82 L 37.831787 82 C 55.86731 82 69.556885 88.637695 78.825073 101.165039 C 88.093262 113.692383 92 132.441406 92 154 Z" />
<path transform="translate(0 -160)" fill="#3e5f9b" fill-rule="evenodd" stroke="none" d="M 104.976685 154 C 104.976685 119.622559 88.519043 102 55.930176 102 L 0 102 L 0 52 L 55.930176 52 C 88.519043 52 104.976685 34.377441 104.976685 0 L 148 0 C 148 21.558838 144.090332 40.567627 134.815063 53.094971 C 125.539917 65.622559 111.839844 72 93.790649 72 L 91.209351 72 L 91.209351 82 L 93.790649 82 C 111.839844 82 125.539917 88.637695 134.815063 101.165039 C 144.090332 113.692383 148 132.441406 148 154 Z" />
<path transform="translate(-180 -180)" fill="#3e5f9b" fill-rule="evenodd" stroke="none" d="M 0 122 C 29.689608 122 44.909092 102.873535 44.909092 65 L 44.909092 0 L 88.090912 0 L 88.090912 65 C 88.090912 102.873535 103.310394 122 133 122 L 133 172 C 114.381004 172 97.964325 167.456299 87.145256 156.677002 C 76.325974 145.897705 70.818184 129.976074 70.818184 109 L 70.818184 106 L 62.18182 106 L 62.18182 109 C 62.18182 129.976074 56.449265 145.897705 45.630192 156.677002 C 34.811123 167.456299 18.618786 172 0 172 Z" />
<path transform="translate(-180 40)" fill="#3e5f9b" fill-rule="evenodd" stroke="none" d="M -0 57 C 29.689608 57 44.909092 37.873535 44.909092 0 L 88.090912 0 C 88.090912 37.873535 103.310394 57 133 57 L 133 107 C 114.381004 107 97.964325 102.456299 87.145256 91.677002 C 76.325974 80.897705 70.818184 64.976074 70.818184 44 L 70.818184 41 L 62.18182 41 L 62.18182 44 C 62.18182 64.976074 56.449265 80.897705 45.630192 91.677002 C 34.811123 102.456299 18.618786 107 -0 107 Z"/>
</svg>
<ul>
<li>Has no external dependencies
<li>Requires no pre-compilation
<li>Weights just 40kB
</ul>
<p>
Authors of HTML, have you ever dreamed of writing dynamic content directly in your HTML, without even having to write any JS modules?
Have you ever wondered, as I have, why the template element is so lifeless, why it is not better instrumented to render dynamic content?
I may have just the thing for you.</p>
</body>