Home API system #CodePenChallenge: Polygons 🔷 – CodePen Blog

#CodePenChallenge: Polygons 🔷 – CodePen Blog

113
0
Norway


It’s the final week of the Shapes #!

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: PRO

- CodePenPROLarge - #CodePenChallenge: Polygons 🔷 – CodePen Blog

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 with Collab Mode • So much more.

Week Four Prompt: 🔷

This week it’s time to rock a rhombus or develop a decagon. We’re working with polygons!

- polygons callum wale 755714 unsplash - #CodePenChallenge: Polygons 🔷 – CodePen Blog

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 our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

  1. 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?
  2. This is a good opportunity to play with the CSS clip-path property.
  3. A polygon challenge is the perfect opportunity to shape up your SVG skills!

Resources

  1. Need some shape inspiration? Check out Dribbble’s polygon tag or Varun Vachhar’s SVG Polygon Generator.
  2. up on Clipping and Masking in CSS at CSS-Tricks, or check out Bennett Feely’s Clippy, a CSS clip-path maker.
  3. 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.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here