Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Community Projects

CodePen Challenge #5: Spooky Halloween SVG Characters


Time for another CodePen Challenge! With Halloween just around the corner, we’d like you to get creative with some spooky SVG. You have three characters to choose from–the best examples will be showcased at the end of October!

Update: Results!

Well, I guess you can never tell–this CodePen Challenge didn’t pull in nearly as many entries as I’d thought (9, compared with the 153 from the previous challenge!) But as a thank you to all those who did take part, here are all nine entries!

The Challenge

We want you to show off your SVG skills. You can use CSS, even JavaScript, but you’re not allowed to touch the SVG markup itself! The SVGs have deliberately been kept relatively simple. Each one is built from just a few paths, strokes, and shapes. The elements within the SVG all have a unique id, which you’ll also see in the CSS, along with a few styles. You can alter the colors, add animation, effects, whatever you want!

Over to You

Here’s what you need to do, in a few dead easy steps.

Step 1

Firstly, pick one of the three demos on CodePen:

Step 2

Hit the Fork button to create your own copy of it, then make as many changes as you want to the CSS and the JavaScript.

Step 3 (Optional)

If you’re signed into CodePen you can edit the description by hitting the Settings button. Use this to give folks an idea of what you’ve done.

Step 4

Hit Save, you’re done. Be sure to let us know in the comments when you’ve finished–and feel free to let us know by tweeting us @wdtuts as well.

That’s it! All entries will be added to this collection on CodePen and the best examples will be showcased on Tuts+ on October 31st!

Good luck and don’t forget to follow Tuts+ on Codepen!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.