It’s time for a new CodePenChallenge theme!
This month we’re going to be exploring some of the things you’ll find in the world’s most stimulating and exotic locations: the common business office. But of course we can get as weird and wild as we want here. What’s an office without an office party?
There’s no reason to be boring here. Each week we’ll start with something that could be boring, and it’ll give us all an opportunity to do something more stimulating with it.
This Week’s Prompt: Sign on the Dotted Line
Let’s have a little fun with SVG this week. SVG can express a curvy path pretty naturally, and what is a signature but a weirdly curvy path?
Your challenge: do something interactive with a signature. If you need a starter, here’s a signature on an open path so you can play with stroke, and here’s one with multiple expanded shapes so you can play with fill.
July’s Challenge Sponsor: HelloSign
Everything IT requires and developers love. The HelloSign API allows you to collect legally binding signatures from your own app. Learn more at HelloSign.com.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag: cpc-signatures. We’ll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
- The signature could draw itself! Here’s how SVG line animation works, and perhaps you could pair it with scrolling?
- Maybe something could morph into the signature, or the signature could morph into something else. Check out the many tools of shape morphing.
- What if you were asking someone to sign their name, like a guest book for your website. How could you capture it?
I’m sure the connection between this weeks challange is obvious: HelloSign helps you capture signatures! Here’s some other resources they recommend:
- Check out all the vector artwork on The Noun Project related to signatures.
- If you’d like to work with your own signature, you could use a free online tool like Method Draw to draw it with the pencil tool and export it as SVG.
- Perhaps the signatures of some famous people like John Hancock or Walt Disney will trigger some inspiration.