Animated SVG Avatar
This demo by Darin animates an SVG image in interaction with the user. The illustration, a Yeti, moves the eyes following the user's click. When entering the password, the beast hides its eyes. A particularly funny animation that gives a new lease of life to an operation that we do several times a day: log in.
Neural Drum Machine
This demo proposed by Tero Parviainen is a drum machine whose patterns are generated by a deep neural network. The first column on the left represents a simplified view of a piano keyboard. Each key is associated with a percussion sound. Four sliders at the bottom set the number of bars in each pattern, tempo, swing, and temperature. Swing allows you to randomly modify the duration of certain notes, thus giving more "humanity" to the whole, while the temperature regulates the width of the patterns. Make a preset, then press "generate", and off you go...
Draggable/Throwable View Directive
Dynamic Play Button
CSS Puns - Moses Sea
A little codepen by Katarzyna Marcinkiewicz who uses the GreenSock animation platform, Tweenmax. The design is perfectly responsive, the code concise. We don't see the whole approach of the author in this little demo. To do so, you must go to the CSS-Puns author's site. As the name suggests, the site mixes CSS animation, and puns on the code. At the crossroads of art, humour and mind games, each page deserves a close look at the animation as well as the code!
Read also on our blog
The best of Codepen #3
The best of Codepen #2
The future of the web is here. Codepen, a platform increasingly known by web designers, brings toget...