Color fonts are a real thing. However...
... Support for OpenType SVG fonts in browsers is in active development, with all the caveats that apply to such functionality - see the caniuse site for current details.
This demo does not use color font technology, nor does it attempt to replicate color font functionality. Instead it demonstrates the application of color design and animation to any text on the web page, typically in HTML header elements, through the use of Scrawl-canvas snippet modules.
- Text is responsive: test by changing the browser/viewport width
- Text is editable
- Text colors will adapt to CSS media features: prefers-color-scheme, prefers-contrast
- Text animation will adapt to CSS media feature: prefers-reduced motion
- To test keyboard accessibility, tab through this demo page
risograph-text-gradient-snippet
This effect is inspired by Risograph printing which uses a limited color palette, stippling colors to create a gradient effect.
Risograph effect - default values
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
Risograph effect - variant 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
Risograph effect - default values with local amendments
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
worley-text-gradient-snippet
Worley noise is a form of procedural texture which can be generated and used to simulate textures which look (a bit) like stone, water or biological cells.
Worley effect - default
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
Worley effect - variant 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
Worley effect - variant 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
animated-highlight-gradient-text-snippet
A simple gradient effect using two colors, spaced along the gradient to make a series of bars. The gradient animates downwards in a repeating pattern.
Animated highlight gradient effect - default (animated)
Scrawl-canvas Phrase entitys include letter spacing functionality; these text snippets will use any CSS letter-spacing property value applied to the header element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
Animated highlight gradient effect - default with amendments
Scrawl-canvas gradients support non-linear easings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
Animated highlight gradient effect - variant 1
Scrawl-canvas supports the use of LAB and LCH color strings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
bubbles-text-snippet
An animation effect that shows bubbles appearing, rising and expanding inside the text.
Bubbles text effect - default values
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
Bubbles text effect - variant 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit magna aliqua
swirling-stripes-text-snippet
A striped 2-color gradient effect. Animation occurs when the user hovers their browser cursor over the header, which leads to a swirl filter being applied to the text.
Swirling stripes effect - default (animated)