Random Animated Circles

CodePen Collection

https://codepen.io/collection/LYYKBx

Completed Pens

• Simple Random Circles #1

• Simple Random Circles #2

HTML

• class vs id

CSS

• Positioning

• border radius

JS Concepts

• for loops

• template literals

• className property

• window.innerWidth

• window.innerHeight

• style properties

• createElement()

• appendChild()

• Math.random()

• GSAP

---

0 Setup HTML & CSS

• will dynamically generate circles

• Step 0 Pen

1 Static Draw Circles

• statically draw circles

• but each is relative to other elements

• Step 1 Pen

2 Individual Absolute Positioning

• position each circle independently

• but this requires multiple id to do statically

• but this requires human beings to count circles

• Step 2 Pen

3 Manually Create Three Circles

• Create 3 circles

• but still manually creating, but with JS

• JS should be automating this

• Step 3 Pen

4 Manually Position Three Circles

• but position still needs set manually

• JS should be automating this

https://codepen.io/manikoth/pen/emYGGyg

5 Manually Color Three Circles

• but color still needs set manually https://codepen.io/manikoth/pen/MYWEEjK

6 Manually Animate Each Circle

• install GSAP

• but JS should animate this randomly

https://codepen.io/manikoth/pen/vEYeeRQ

7 JS Loop Unit Test

https://codepen.io/manikoth/pen/bNGooQd

8 Refactor with Randomization

https://codepen.io/manikoth/pen/gbOGaRr