Coding Challenges

This was part of coding challenge to make the best animation using pure HTML/CSS (Yes, I won ^_^). Absolutely No Javascript was used to create this animation of Mario. I used SVG "sprites" and form elements to create an interactive frame based CSS animation.

Click here to see the actual animation.

This was an experiment using pure CSS animations, and thus is best viewed at a browser width of approximately 1440 pixels (laptop size).

This project allowed me to get familiar with SVG animations on the web, as well as learning about hover and focus states.

View the tooltips in action

Using JavaScript, CSS, and the Pythagorean Theorem, I created background tiles that react to mouse movement; tilting and changing color based on where you drag the mouse.

Play with the tiles yourself

Using an uploaded CSV, the script goes through each line and displays the text for a specified length of time. I made a fun 3D cube with CSS to react when each line is executed.

Use the demo CSV or upload your own