First JavaScript Projects: SVG and CSS Animations

Scoot Bot

I designed a SVG robot character in Adobe Illustrator, and programmed it to chase a JavaScript event (cursor click) across Mars. I animated the layer classes, the blinking eyes and flipping satellite dish, with CSS keyframes. The cubic-bezier() Function varies the speed of his roll. Giving credit where it’s due, I got a great start through a tutorial by Kirupa Chinnathambi.

Watch the Scoot Bot operate on CodePen, here.

Scoot Bot

Bolt from the Gray

Pixel art thunder cloud taking it out on a flower via css animation. See the CodePen here.

Bolt from the gray!

A CodePen picked pen!

The Floaty Cracker

My Adobe Illustrator SVG of a cheese cracker, set loose to roam the header of the site I use as my art portfolio. The snack is animated through the JavaScript function RandomObjectMover, with boundaries defined by the WordPress plugin, Insert Headers and Footers.

Full code for the fun experiment here on Medium.

Floaty cracker