DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for CodePen Challenge: Textile Patterns
Drawcard
Drawcard

Posted on

CodePen Challenge: Textile Patterns

Our entry for this week's CodePen Challenge took the 4 supplied fabric swatches, and added a little bit more realism to them. We ended up mocking up a generative poster design for a fictitious textile exhibition - which changes layout every time the page is reloaded!

DEV TIME: 2 hours
FEATURES:

  • Added more linear gradients to create a 3d fabric texture
  • Used clip-path on the swatches to give them a ragged edge
  • Added some randomisation effects in JS to create a new layout every time the page is refreshed
  • Adapted script to add in random rotation & better grouping of elements, and adaption to mobile resolution

Oldest comments (0)

Let's hear from your organization

Create an Organization and start sharing content with the community on DEV.