Posted on by Marie Mosley

#CodePenChallenge: Shapes

It's a new month, and that means it's time for a new #CodePenChallenge!

Last week, we wrapped up a month of color palette challenges with purple! Check out the Pens from the challenge in our Perfect Purples 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 One Prompt: Circles 🔵

Let's bounce into this new challenge with circles! This week we want to see what you can create with the roundest of shapes.

Your Challenge

Create a Pen that features circles in an interesting way.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-circle. 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

  1. It's a basic idea with almost unlimited potential: create a Pen with circles in it! They can be precise or abstract, animated or still, colorful or monochrome.
  2. Show us circles in the background. You could give us a beautiful bokeh or a pattern of interlocking rings.
  3. Are you in the center of the venn diagram of CodePen members who like to participate in challenges and like circles? Geek out with some data and create a Venn diagram.

Resources

  1. Here are some quick circle-building tips: You can make a circle with any HTML element by setting the `width` and `height` to be the same and using `border-radius: 50%`. Or, you can use SVG's `<circle>` or `<ellipse>`.
  2. Building a background? Draw inspiration from Owlypixel's "Bokeh Pattern", or the delicate circle patterns of Subtle Patterns.
  3. Creating a diagram? Check out Adrian Roselli's CSS Grid and Shape-Outside Venn Diagram or edanny's rendition of magnt's 404 Venn Diagram.

The post #CodePenChallenge: Shapes appeared first on CodePen Blog.