DEV Community 👩‍💻👨‍💻

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

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post