WebL'Agence - The best of Codepen #3

The triptych HTML, CSS, Javascript has not finished surprising us. More than an online editor, Codepen, allows you to share and demonstrate your know-how in web development. It is the place to visit to learn, fork code, or simply enjoy the demos offered. Here are some of them worth a visit.

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.

See the Pen Animated SVG Avatar by Darin (@dsenneff) on CodePen.


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...

See the Pen Neural Drum Machine by Tero Parviainen (@teropa) on CodePen.


Draggable/Throwable View Directive

A codepen proposed by Miles Manners that provides two javascript functions to give an interesting dynamic to objects that can be moved on screen. The "Throwable" view gives the object a clear movement, like a dart throw. While with the "Draggable" method, the rectangle ends its course in a damped movement, like a slide in roller skate...but slower! A nice opening here for skill game creation. A code to forge and multiply absolutely!

See the Pen Vue Draggable/Throwable Directive by Miles Manners (@milesmanners) on CodePen.


Dynamic Play Button

A codepen by Sawyer Schumacher that animates the play button to the rhythm of the music. The code only uses the basic javascript functions to access the HTML5 canvas, and to play an mp3 audio file. Some classical geometry calculations on the circles, and the magic simply works. A very clear code, and concise for an amazing effect.

See the Pen Dynamic Play Button by Sawyer Schumacher (@Sschumac2) on CodePen.


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! 

See the Pen CSS Puns - Moses Sea by Katarzyna Marcinkiewicz (@KazikM) on CodePen.



Here is a small overview of the possibilities offered when one has a good understanding of web formats, as well as a good dexterity to code in HTML, Javascript, and CSS. The codepen tool is very valuable in a "test and try" approach. Syntax highlighting, visualization of the three coding windows, and real-time preview make it a very efficient tool. The "drag and drop" of documents of all kinds (json, svg, cvs...) is unquestionably flexible. The possibilities to forge code and share it, make it a powerful social network for professional developers, and become one. For those who are not yet convinced codepen direction to register.

Don't hesitate to contact us and consult the second article of Codepen's Best !