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!
Your Challenge
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).
Ideas
- 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!
Resources
- 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.
The post #CodePenChallenge: Polygons 🔷 appeared first on CodePen Blog.