Codetober Scares!

The CodePen Chicago Halloween event was held at Backstop Solutions for the third year in a row! They provided food, drinks and space; it was much appreciated. We had a lot of attendees presenting their spooky pens from CSS characters to JavaScript web games, we had it all!

Since this is the last one of the year, stay tuned for the next announcement and we plan to do in the future! Smiling Halloween light with blurred smaller lights in front


Ola Giwa

Ola showed characters made only with CSS and explained the process of blocking out the shapes before filling in the colors. Check out the Mario Ghost and Koala.

Ola typing on MacBook in front of projector

See the Pen Mario Ghost by OG (@OG) on CodePen.

See the Pen CSS Image by OG (@OG) on CodePen.

Frederick Wells

Fred created an SVG mask of Zora and talked about how it was built in Illustrator then updated as a mask for the image of Zora.

Fred in front of the projector screen with his hand raised

See the Pen Zora by Frederick Wells (@pandabrand) on CodePen.

Marvin Cespedes

Marvin explored the Web Animation API and made a walking Dry Bones that moves from side to side :D

See the Pen Dry Bones by Marvin Cespedes (@mcespo) on CodePen.

Sean Codes

Sean's pen was the scariest thing shown, an OS update! Just install... or you'll be haunted forever!

A projected image of the display of Sean's pen

See the Pen updates available by sean_codes (@sean_codes) on CodePen.

Colt Borg

Which witch hat to pick? Colt's Vue pen is an example of a Single Page App(SPA) that swaps out the hat on the witch when you make your selection!

Colt with projector light over his face in black and white

See the Pen Witch Hat App by Colt Borg (@coltborg) on CodePen.

Brian Montana

I showed a pen that used fractals that randomized the length of the branches and at the end draw leaves with a curated array of fall colors.

Project with Brian's pen displayed on it

See the Pen Fall trees by Brian Montana (@brianmontanaweb) on CodePen.

Jeremy Kahn

This web game by Jeremy was a learning process to explore flex box, you can buy items, plant them and check out your inventory!

Jeremy with projector light typing on a laptop


Austin Andrews

Andrew showed Material Design Icons documentation for React and how to use the components, lots of interesting compounding, check it out!

Austin pointing to the projector

MDI Demo

Photo Gallery:

CodePen Chicago at Backstop Solutions

Thank you!

Thanks to Colt, Andy and Backstop Solutions for the space, food and being wonderful hosts! Thank you to Marvin for the photos and to Austin for the MDI posts again!

1,405 1 11