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

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 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

Latest comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!