CodePen Chicago October 2016 - Halloween Special

πŸŽƒ Halloween Special πŸŽƒ

The Halloween season is my favorite time of year so I couldn't resist making the 8th CodePen Chicago meetup that was to take place in late October a Halloween-themed meetup.

On Wednesday, October 26th we gathered at the Backstop Solutions office space on the 39th floor of the Willis (formerly Sears) Tower in downtown Chicago. It was a cold and rainy night, and it was right in the middle of game two of the World Series, so it was kind of a big deal for all of the folks who made it out (thanks!). Once again, I was blown away at how awesome this community is to be around, and how impressive and creative everything they share is.

I challenged all to bring their spookiest pens to share, only expecting one or two people to share my holiday spirit, but man was I wrong. Everyone who shared had something spooky-themed, and there were some real doozies, as always.

As always, here's a collection of all the pens that were shared, and as a bonus, here is the spooky playlist that I put together to set the mood for the evening.

Colt Borg

Colt Borg presenting at CodePen Chicago

Colt Borg was our gracious host at Backstop and kicked the evening off by sharing this event title screen with a killer animated spider that would crawl in and out of view β€”Β all done in CSS. Play around with the speed and check out the detail with even the tiny pincers animating! Also, a huge thanks to Colt for dressing up as the Green Arrow so I wasn't the only one who came in costume!

Steven Berliner

Steven Berliner presenting at CodePen Chicago

Steven has been coming to CodePen Chicago for a while now so it was really great to see him get up and share something with us all! He got the audio momentum going with this Shepard Tone Generator (forever-rising tone) he created with a canvas visualization β€”Β rad!

Matthew Lissner

Matthew Lissner presenting at CodePen Chicago

Matthew kept the spookiness rolling with this animated flying broomstick and resizable CSS pumpkin with some scary consequence (political commentary warning).

Brian Montana

Brian Montana presenting at CodePen Chicago

CodePen Chicago regular and former host Brian Montana shared a timely canvas rendition of "the upsidedown" from Stranger Things with eerie floating particles and a layered panning scene.

Kevin Lesht

Kevin Lesht presenting at CodePen Chicago

This was Kevin's first time at the meetup, and he really made a fantastic first impression by sharing this elaborate random Jack O' Lantern generator that you can save out as an image!

Andy Richardson

Andy Richardson presenting at CodePen Chicago

Andy presented at the very first CodePen Chicago meetup, but it's been a while since we've seen him present, so it was great to have him share this Halloween Photo Booth that utilizes a really neat animated masking technique and the user's webcam to capture a snapshot (in-progress).

Jake Albaugh

Jake Albaugh presenting at CodePen Chicago

Jake outdoes himself every time, I swear. What the hell is next?! This time Jake decided he wanted to try messing around with Firebase to do something that would allow everyone at the meetup to get involved by pulling the pen up on their own device. The result was a musical performance that had Jake at the control board, changing keys and manipulating the drum track, while everyone at the meetup had different tones emanating from their devices at different volumes (controlled by tilting their devices). The experience was incredible to say the least, and I tried to capture what happened on video to give a sense for how it all went down, but due to poor planning on my part I was left to the built-in mic on my camera which doesn't do a terrific job, but here it is anyway:

Jake followed up with a blog post breaking down how he achieved the effect if you're interested in digging into it:

Dan Cortes

Dan Cortes at CodePen Chicago

Repeat-presenter Dan Cortes kept the audio experimentation going with this spooky-themed theremin that uses Tracking.js and Tone.js to track a cyan-colored-object with your webcam and manipulate the tone like you would with an actual theremin! He also shared this bonus spooky-themed pen that uses your microphone to move a skull's jaw as you talk!

Coleman Collins

Coleman Collins at CodePen Chicago

Former host Coleman Collins spookified his [Movies Game] pen for this special occasion and demoed the addicting game that has you trying to use as few search keywords as possible to return the Wikipedia or IMDB page for a given movie β€” try it out!

Philip Montesinos

Philip Montesinos at CodePen Chicago

Philip scared the crap out of all of us by sharing this seemingly innocent pen of a Pac Man animation (wait for it...and turn your volume down a bit!).

Dubi Kaufmann

Dubi Kaufmann at CodePen Chicago

Dubi really won me over with this CSS rendition of the famous orange carpet pattern from one of my favorite horror movies, The Shining.

Jack Doyle

Jack Doyle at CodePen Chicago

Jack, who is the Founder of GreenSock, a JavaScript animation platform, made a ridiculous Halloween animation (check out that green sock on the spider!), and also shared with us a new ease visualization tool he's been working on, as well as a few other impressive GreenSock animation tools β€” check them all out here.

Photos From The Evening

CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 Yes, that's me. I dressed up as my mother from the 80's/90's. She's a Jazzercise instructor. CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 CodePen team member Rach Smith made it out for the event! CodePen Chicago Meetup October 2016 CodePen Chicago Meetup October 2016 The Collins Twins β€” Coleman and Kennedy.

See Ya Next Time!

A huge thanks to Backstop Solutions and Colt for offering up their awesome space, and to MediaTemple for generously providing the food and drinks for the evening!

If you want to hear about when the next meetup will be happening sign up to the mailing list at

If you have ideas, questions, comments, or would like to host a future meetup, send me a message: