Use Tensorflow with GPUs on Mac with the official Apple plugins.

Photo by Devon Janse van Rensburg on Unsplash


Gradient lines and brushes with linear interpolation

Gradient lines on HTML5 Canvas
Gradient lines on HTML5 Canvas
Gradient lines on HTML5 Canvas. Image by Author.

Canvas Way

// assuming you already have a <canvas> in your html.

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800
canvas.height = 500
ctx.lineWidth = 80;
ctx.lineCap = 'round'

gradientLine(ctx, 60, 60, 300, 380, 'black', 'blue')
gradientLine(ctx, 720, 120, 80, 300, 'brown', 'orange')
gradientLine(ctx, 520, 70…


With a little bit of vector math

Custom brush shapes drawn at fixed distance.
Custom brush shapes drawn at fixed distance.
Custom brush shapes drawn at fixed distance. Image by Author.

Simplest Method


For interactive drawing applications

Drawing paths interactively
Drawing paths interactively
What we will build in this post. Image by Author.

Paths in p5js


Adobe Illustrator’s Pathfinder, but with JavaScript

Vector boolean operation demo
Vector boolean operation demo
Vector boolean operation demo. Image by Author.

Why Vector Boolean Ops?


Create a draggable element that also animates.

Dragging HTML elements with react-draggable
Dragging HTML elements with react-draggable
React Draggable component and CSS transition. Image by Author.

Setup

$ npx create-react-app…


With smooth map animation between pages

Animate over map without page refresh
Animate over map without page refresh
Gatsbyjs and Mapbox GL JS. Image by Author.

Word-level typography animation.
Word-level typography animation.
Word-level typography animation with p5.js. Image by Author.

Typography animation using class & objects


Typography animation using font outlines.
Typography animation using font outlines.
Image by Author.

Get the outlines of your fonts with p5.js and opentype.js

Basic Usage


Save mp4 videos from within a browser. No server needed.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store