It’s the final week of the Shapes #CodePenChallenge!
Last week, we got a little flexible with the definition of a shape and made some blobs. Check out the Pens from the challenge in our #CodePenChallenge: Blobs 🍦 collection.
February’s Challenge Sponsor: CodePen PRO
CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. You’ll be able to drag-and-drop to upload assets • Cross-browser test easier with no-login Debug View and Live View • Make anything private with the flip of a toggle • Collaborate in real time with Collab Mode • So much more.
Week Four Prompt: Polygons 🔷
This week it’s time to rock a rhombus or develop a decagon. We’re working with polygons!
Create a Pen that includes polygon shapes.
How to Participate
Create a Pen and tag it
codepenchallenge and the weekly tag
cpc-polygon. We’ll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
- A polygon is just a multi-sided shape, so you can let your shape imagination take over for this challenge. And hey, a triangle’s a polygon too! Maybe you could build upon what you created during week two?
- This is a good opportunity to play with the CSS clip-path property.
- A polygon challenge is the perfect opportunity to shape up your SVG skills!
- Need some shape inspiration? Check out Dribbble’s polygon tag or Varun Vachhar’s SVG Polygon Generator.
- Read up on Clipping and Masking in CSS at CSS-Tricks, or check out Bennett Feely’s Clippy, a CSS clip-path maker.
- Stepping into SVG polygons? There’s so much you can do! Check out Gabi’s shape-outside: polygon + SVG and Greensock’s MorphSVG for just a glimpse at the possibilities.