DEV Community: Rik Roots

Header text colorise and animate effects

Rik Roots — Mon, 13 Jun 2022 18:31:14 +0000

Color fonts are a real thing. However ...

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 JS modules.

https://codepen.io/kaliedarik/project/editor/AzWnNa

Responsive, interactive and accessible before-after image slider infographic effect

Rik Roots — Sun, 15 May 2022 10:49:06 +0000

New version of Scrawl-canvas - v8.6.1 - released today.

Rik Roots — Mon, 13 Sep 2021 12:25:18 +0000

Scrawl-canvas is a Javascript library for creating responsive, interactive and accessible HTML5 canvas infographics and animation for modern websites. https://scrawl-v8.rikweb.org.uk/

Scrawl-canvas: art video creator

Scrawl-canvas: ribbon kaleidoscope

Scrawl-canvas: colorize a live video feed

Scrawl-canvas: generate and use a noisy 'Risograph-style' Gradient

Rik Roots — Tue, 24 Aug 2021 08:19:12 +0000

Scrawl-canvas: kaleidoscope video creator

Rik Roots — Fri, 16 Jul 2021 19:35:32 +0000

Drag-drop an image onto the canvas to load it into the kaleidoscope. Click on the record button at any time to record the output. Video will download when you stop recording. Move your mouse over the canvas to stretch things. Note: this CodePen works in Chrome and (possibly) Firefox; YMMV!

Let's play Connect-The-Dots ... on your face!

Rik Roots — Thu, 10 Jun 2021 11:46:09 +0000

See demo on CodePen

This is my first experiment with MediaPipe's face mesh MachineLearning model

Scrawl-canvas Javascript library for the HTML5 canvas element - v8.5.3 released into the wild!

Rik Roots — Sun, 06 Jun 2021 20:16:18 +0000

The latest update of the Scrawl-canvas Javascript library for the HTML5 canvas element has been released into the wild!

New shiny includes a superfast gaussian blur filter, fun with line-based spirals, and stuff to make imaging TensorFlow models a bit easier.

Emulating the new Stripe gradient background

Rik Roots — Mon, 31 May 2021 07:13:24 +0000

An attempt to emulate the new Stripe.com gradient background animation using a 2D canvas element and my Javascript library ... and, to add to the fun, the canvas is responsive!

Blurry rotating background blobs - no canvas or Javascript, just CSS3

Rik Roots — Sat, 15 May 2021 10:11:18 +0000

Scrawl-canvas: Creative coding 20201228-2

Rik Roots — Mon, 28 Dec 2020 21:48:17 +0000

Patterns do not need to be just a bunch of static images. With a bit of imagination (and some hidden canvases) we can create a wide range of animated patterns to use with our fills and strokes.

Scrawl-canvas: Creative coding 20201227-1

Rik Roots — Sun, 27 Dec 2020 14:03:25 +0000

An experiment to create and explore interactive Moire interference patterns

CPC Challenge Dec 2020 Week 2

Rik Roots — Thu, 17 Dec 2020 19:34:25 +0000

This pen makes extensive use of the Scrawl-canvas particles system - both for the star at the top of the tree and the lights within it. The candle flames are also a particle-based animation.