POC: Apply color, distortion and animation effects to (accessible) text

This demo does not use color font technology, nor does it attempt to replicate color font functionality. Instead it demonstrates a proof-of-concept application of color design and animation to any text on the web page, typically in HTML header elements, through the use of [JS library] Scrawl-canvas snippet modules. Each header element can personalize the snippet effect applied to it using CSS custom properties, meaning each snippet can create a range of different effects.

DOM text and canvas text: These snippets work by matching the font characteristics of the DOM headers and recreating the text in a <canvas> element added inside the header element (progressive enhancement). For accessibility and user experience purposes the DOM text is not removed: users should be able to copy/paste the header text as normal. Users who disable Javascript in their devices should still be able to see the normal, CSS styled header text.