├── .gitignore
├── dist
└── LapisLegit.ttf
├── assets
├── test-image.png
├── test-image-animated.gif
├── default-glyph.svg
├── test-image.base64
└── test-image-animated.base64
├── src
├── svg
│ ├── 0041.svg
│ ├── 0057.svg
│ ├── 0061.svg
│ ├── 0043.svg
│ ├── 0042.svg
│ ├── 0052.svg
│ ├── 0047.svg
│ ├── 0045.svg
│ ├── 0058.svg
│ ├── 0059.svg
│ ├── 0060.svg
│ ├── 0046.svg
│ ├── 0048.svg
│ ├── 0055.svg
│ ├── 0051.svg
│ ├── 0054.svg
│ ├── 0044.svg
│ ├── 0056.svg
│ ├── 0053.svg
│ ├── 0049.svg
│ └── 0050.svg
└── cpal.ttx
├── scfbuild-osx.yml
├── README.md
├── generatetestpage.py
├── LICENSE
└── testpage.html
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | sync.sh
--------------------------------------------------------------------------------
/dist/LapisLegit.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoelN/LapisLegit/HEAD/dist/LapisLegit.ttf
--------------------------------------------------------------------------------
/assets/test-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoelN/LapisLegit/HEAD/assets/test-image.png
--------------------------------------------------------------------------------
/assets/test-image-animated.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RoelN/LapisLegit/HEAD/assets/test-image-animated.gif
--------------------------------------------------------------------------------
/assets/default-glyph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/svg/0041.svg:
--------------------------------------------------------------------------------
1 |
6 |
9 |
--------------------------------------------------------------------------------
/src/svg/0057.svg:
--------------------------------------------------------------------------------
1 |
6 |
9 |
--------------------------------------------------------------------------------
/src/svg/0061.svg:
--------------------------------------------------------------------------------
1 |
6 |
9 |
--------------------------------------------------------------------------------
/src/svg/0043.svg:
--------------------------------------------------------------------------------
1 |
8 |
11 |
--------------------------------------------------------------------------------
/src/svg/0042.svg:
--------------------------------------------------------------------------------
1 |
8 |
11 |
--------------------------------------------------------------------------------
/src/cpal.ttx:
--------------------------------------------------------------------------------
1 |
2 |
By Roel Nieskens. More info on Github!
101 |If you see black squares or nothing in the first column, your browser doesn't support OpenType SVG yet.
102 |At this moment, some glyphs cause browsers to crash. A "!" will be shown instead of the letter. Click and select the cell to enter the characters yourself... if you dare!
103 || Glyph | 107 |Image | 108 |Iframe | 109 |Inline | 110 |Description | 111 |
|---|
By Roel Nieskens. More info on Github!
53 |If you see black squares or nothing in the first column, your browser doesn't support OpenType SVG yet.
54 |At this moment, some glyphs cause browsers to crash. A "!" will be shown instead of the letter. Click and select the cell to enter the characters yourself... if you dare!
55 || Glyph | 59 |Image | 60 |Iframe | 61 |Inline | 62 |Description | 63 |
|---|---|---|---|---|
| A | 70 | 73 | | 0041 (A): Original SVG | ||
| B | 81 | 84 | | 0042 (B): Rotated 30 degrees with inline style on group | ||
| C | 92 | 95 | | 0043 (C): Opacity: 0.5 with inline style on group | ||
| D | 127 | 130 | | 0044 (D): Animating opacity from 0.1 to 1 | ||
| E | 139 | 142 | | 0045 (E): Use JavaScript to turn all elements in the SVG blue | ||
| F | 157 | 160 | | 0046 (F): Turn each element black on hover, using CSS transition of 1 second | ||
| G | 169 | 172 | | 0047 (G): Rotating with SMIL's animateTransform | ||
| H | 188 | 191 | | 0048 (H): Foreignobject with HTML and some inline styles to change background color | ||
| I | 195 | 198 | | 0049 (I): SVG with embedded PNG image | ||
| P | 202 | 205 | | 0050 (P): SVG with embedded animating GIF image | ||
| ! | 213 | 216 | | 0051 (Q): Iframe in foreignObject loading a small base64'ed page. CRASHES FIREFOX! | ||
| R | 225 | 228 | | 0052 (R): The letters "ABC" in Comic Sans font through SVG's text element | ||
| S | 253 | | 0053 (S): Recursive SVG as taken from https://twitter.com/AmeliasBrain/status/758128946227605504 | ||
| T | 288 | 291 | | 0054 (T): Media queries: < 600px image will turn greyscale, < 300px it will get white strokes | ||
| U | 310 | 313 | | 0055 (U): CSS blend modes: using mix-blend-mode on each of the three elements in the SVG | ||
| V | 342 | | 0056 (V): Gradient text, taken from http://codepen.io/brenna/pen/mybQVx | ||
| W | 350 | 353 | | 0057 (W): Inherit CSS text color (purple) when no fill color has been explicitly set | ||
| X | 364 | 367 | | 0058 (X): Inherit CSS text color (purple) when context-fill is used as fill value on each path, except for the circle which should be lime | ||
| Y | 378 | 381 | | 0059 (Y): Inherit CSS text color (purple) when context-fill is used as fill value though inline styles on each path, except for the circle which should be lime | ||
| ` | 394 | 397 | | 0060 (`): Gradient on square from red (opacity 0) to green (opacity 1) | ||
| a | 403 | 406 | | 0061 (a): Use CPAL table |