By Roel Nieskens. More info on Github!
If you see black squares or nothing in the first column, your browser doesn't support OpenType SVG yet.
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!
|A||0041 (A): Original SVG|
|B||0042 (B): Rotated 30 degrees with inline style on group|
|C||0043 (C): Opacity: 0.5 with inline style on group|
|D||0044 (D): Animating opacity from 0.1 to 1|
|F||0046 (F): Turn each element black on hover, using CSS transition of 1 second|
|G||0047 (G): Rotating with SMIL's animateTransform|
|H||0048 (H): Foreignobject with HTML and some inline styles to change background color|
|I||0049 (I): SVG with embedded PNG image|
|P||0050 (P): SVG with embedded animating GIF image|
|!||0051 (Q): Iframe in foreignObject loading a small base64'ed page. CRASHES FIREFOX!|
|R||0052 (R): The letters "ABC" in Comic Sans font through SVG's text element|
|S||0053 (S): Recursive SVG as taken from https://twitter.com/AmeliasBrain/status/758128946227605504|
|T||0054 (T): Media queries: < 600px image will turn greyscale, < 300px it will get white strokes|
|U||0055 (U): CSS blend modes: using mix-blend-mode on each of the three elements in the SVG|
|V||0056 (V): Gradient text, taken from http://codepen.io/brenna/pen/mybQVx|
|W||0057 (W): Inherit CSS text color (purple) when no fill color has been explicitly set|
|X||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||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|
|`||0060 (`): Gradient on square from red (opacity 0) to green (opacity 1)|
|a||0061 (a): Use CPAL table|