A programmer's note book

A monkey from pure CSS code. Made only from circles and ellipses, technically only ellipses. Eyes, ears, face and mouth are obvious ellipses. The smile and hair are ellipses too, a transparent one wit only one side border, and rotated in such a way that it looks like a strand of hair. Even the monkey's smile, is a ellipse covering the whole face, but its transparent and has a bottom-border  of few pixels which makes it look look like a smile. The complete CSS and the monkey:  See the Pen CSS Monkey by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

Done using basic shapes. Circle , Rectangle , Semi-circle , Triangles See the Pen CSS Ghost by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

Inspired from a Pen on codepen which had the same functionality but with too much of JS to calculate and split the blocks into further pieces! I took advantage of CSS along with jQuery to make the same PEN  in a few lines. Code and the splitting effect! Click as many squares as you can.. See the Pen Break the block! by Jones Vinoth Joseph ( @jo_Geek ) on CodePen . P.S. The original PEN  used images. Being a lazy bone i just put background colors instead of images..

Kitty with basic shapes in pure CSS. Well don't ask me why it is staring at you with mouth open!! I am no artist.. just put few circles and lines here and there to make it look like a cat!! Here is the code.. and the cat!! See the Pen CSS Kitty by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

Check out this pen which allows you to draw tiny solid colorful circles over your web page. It leaves behind a trail of tiny circles wherever you click and drag your mouse to: Click and drag your mouse over this page!    Select your options: (Try it out on Codepen if viewing from mobile, to support touch functionality) Color : Rainbow Red Blue Green Yellow Violet Orange Pink White Black Size (pixels): Transparency : 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% The code: See the Pen Click and drag colors! by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

Animated grid lines in CSS. Sure has plenty of <div> tags in it..  See the Pen Animated gridlines by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

Windows style buttons with hover and click effect purely in CSS. Windows Classic, WindowsXP and Windows 7 buttons See the Pen Windows Buttons by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

Just some random CSS thoughts. Its actually not a background, its one div translating over the other! Rainbow colored gradient with background-position animated and a div over it with changing colors with some transparency. See the Pen Colors background by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .