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
- 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.
- Show us circles in the background. You could give us a beautiful bokeh or a pattern of interlocking rings.
- 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
- 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>`.
- Building a background? Draw inspiration from Owlypixel’s “Bokeh Pattern”, or the delicate circle patterns of Subtle Patterns.
- 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.