SuperHi FM

Search:

Catalog Cart About Sign in

Advanced CSS + Javascript

Super Shapes

Chapter 03

Super Shapes

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Project introduction

Lesson 02

What are SVGs and how do we use them?

Lesson 03

Creating our own page with a simple SVG image

Lesson 04

Introducing Tachyons as a lightweight CSS toolkit

Lesson 05

Introduction to a grid system using Tachyons

Lesson 06

Building our full grid

Lesson 07

Final grid finishes and background colors

Lesson 08

Drawing circles in SVG to build our tunnel animation

Lesson 09

Introducing anime.js and using it for animating our tunnel

Lesson 10

Using transform-origin and easing to add character to our animations

Lesson 11

Using a delay function to create a staggered animation effect

Lesson 12

Our conveyor belt animation effect

Lesson 13

Adding our color palette in using lightweight CSS classes

Lesson 14

Looking at anime.js demos and using them to animate paths

Lesson 15

Using the same path technique to create a wave animation

Lesson 16

Using SVGOMG to compress SVGs

Lesson 17

Using an inset box shadow to add borders to our boxes

Lesson 18

Adding our cross SVG code in

Lesson 19

Using Javascript to duplicate our SVG content multiple times

Lesson 20

Animating our crosses using a delayed rotation effect

Lesson 21

Repeating the same technique for our squares

Lesson 22

Animating our dot pattern using scale transform

Lesson 23

Adding our title in as raw SVG

Lesson 24

Animating our flashing boxes using background color and arrays

Lesson 25

Creating our square tunnel animation using SVG rects

Lesson 26

Fixing up our page to make it responsive

Lesson 27

Project final tweaks and summary

SuperHi FM

Want some ambient music in the background? Play our radio station!

Good Times

Next: Chapter 04

Good Times

Jiffy

Back: Chapter 02

Jiffy

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

Super Shapes explores SVG and how to use them to create motion graphics for the web. We’ll look at creating the shapes and animating them individually using Javascript. We’ll dive into grids and how we can use a CSS toolkit to write minimal CSS.

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

Sign in to save notes