Creative Coding Club

Welcome! Course Status Updated 10/15/2024

Animating the Guts of an SVG with GreenSock

Style SVG with Attributes and CSS

Exploring More Shapes and Line Styles with Boxy SVG

SVG Path Element: Bezier Curve Commands

SVG Groups and Applying Transforms

SVG Text: Using Custom Fonts

Understanding transformOrigin and svgOrigin

Project: SVG Basic Banner

SVG Strokes: linejoin, linecap, and miter-limit

Avoiding Weird Glitches with Line Animations

Don't Animate tspan Elements

Character by Character Animations Part 1: Characters as Paths

Character by Character Animation Part 2: Characters as Text

SVG Text on Path

SVG viewBox and viewport

Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares

preserveAspectRatio Part 2: Recap and Examples

Marching Ants: Intro to dasharray and dashoffset

Drawing Animated Lines

Using DrawSVG Plugin

DrawSVG Mastery

Adding Custom Split Points with Boxy SVG

Recreating GreenSock.com Jelly Nav

Ball on a Wire

Line Jumper Basic: Animating Start and End Independently

Line Jumper Advanced: Clip Path, Holes and Nesting Animations

Introducing SVG Clip Paths

Animating SVG Clip Paths

Introducing SVG Masks

Animating SVG Masks: Reveal and Hide Text

SVG Masks: Spotlight Effect

Clip and Mask: Feathered Colorize Effect

Animating Dashed Strokes

Isometric Bar Animation

Isometric Bar Animation Part 2: Adding Shadow and Final Touches

Draggable SVG X-Ray Mask

SVG Filters: Animated Warp

SVG Goo FIlter

Goo Configurator

Introducing SVG Patterns

Creating SVG Patterns in Boxy SVG

Animating SVG Patterns

Animating Multiple Variations of a Template Pattern

Introducing MotionPath Plugin

Infinite MotionPath Followers

Path Followers on a Blob Shape