Satisfying Animations

Animated html and SVG.

Technologies Used

Html, Css, SVG

When

When I was in 7th grade.

Why

I wanted to make things that are satisfying to look at. Most of these are looped over and over, and are colorful.

What

Html Animations with position: fixed;

Flicker

The first thing that I made that is part of this group is just a page that flickers between white and black. View at your own risk.

Warning! Flickering screen!

Grow

Rainbow rectangles that group bigger and bigger.

Magnify

Concentric black and white circles. It’s called magnify because if you look away after staring at it things appear magnified.

Rainbow

Page with colorful background animated with Css.

Shift

Rectangles that move back and forth clockwise while changing colors.

Shrink

Like magnify, but if you look away things shrink.

Spiral

Similar to shift, except this time the colors don’t change and the colors move clockwise without moving back.

Squish

My favorite animation, which is supposed to look like a busy station of an assembly line. Because of scaling problems with this <iframe>, please click on the link above if you want to see the actual page.

SVG Animations

Dodger

At first I was trying to make a Moon orbiting an Earth orbiting a Sun, but then I discovered that when the moon orbits at the same speed as the Earth in the opposite directions, it looks like the moon is just barely avoiding being hit by the Earth.

Bread

Rotating bread.

Lines

Colorful lines that are overlapping in a pattern. Based on something that I drew on paper.

Pencil

A pencil falling forever.

Satisfying

Bars that move perfectly so that the balls can pass.

Test

A circle that changes colors as it moves from left to right. This was the first thing I made to try out SVG animations.

What I learned