Codepen.io The Webs Playground

What Is CodePen?

CodePen is a playground for the front end web.

It can be used to show off your latest creation and get feedback from the community.

We frequently need to test code and find new ideas for web projects that we are working on and CodePen.io is the perfect online tool to do this. We can use CodePen for either testing code that we have written to use on a project before we implement the code, or even to find lots of new and exciting ideas for using in our next projects.

Here are a few of our favourite items on Codepen.io

Gooey Menu

By Lucas Bebber

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.

Hamburger Menu - HTML, CSS & jQuery

By By Glenn Smith

See the Pen Hamburger Menu - HTML, CSS & jQuery by Glenn Smith (@g13nn) on CodePen.

Accordion | Greensock

By Arden

See the Pen Accordion | Greensock by Arden (@aderaaij) on CodePen.

Happy 10th Anniversary Smashing!

By Sarah Drasner

See the Pen Happy 10th Anniversary Smashing! by Sarah Drasner (@sdras) on CodePen.

Responsive Huggy Laser Panda Factory

By Sarah Drasner

See the Pen Responsive Huggy Laser Panda Factory by Sarah Drasner (@sdras) on CodePen.

SVG animation with GreenSock article demo.

By Allan Pope

See the Pen SVG animation with GreenSock article demo. by Allan Pope (@allanpope) on CodePen.

SVG Animation

By Hoàng Nhật

See the Pen SVG animation by Hoàng Nhật (@thiennhat) on CodePen.

Mousemove / Accelerometer tilt effect | Greensock

By Arden

See the Pen Mousemove / Accelerometer tilt effect | Greensock by Arden (@aderaaij) on CodePen.

Animated Preloader - GreenSock DrawSVG Plugin

By Petr Tichy

See the Pen Animated Preloader - GreenSock DrawSVG Plugin by Petr Tichy (@ihatetomatoes) on CodePen.

Animated SVG text mask | Greensock

By Arden

See the Pen Animated SVG text mask | Greensock by Arden (@aderaaij) on CodePen.