Resources
Tools, generators, and guides for pattern-making.
Pattern Tools & Generators
Tool Resources
Tool 1
CSS Polka Dot Generator by Brian Louis RamirezA lightweight, no-JavaScript tool for generating CSS-only polka-dot background patterns using custom variables.
Tool 2
CSS Polka Dot Generator by Brian Louis RamirezA lightweight, no-JavaScript tool for generating CSS-only polka-dot background patterns using custom variables.
Tool 3
CSS Polka Dot Generator by Brian Louis RamirezA lightweight, no-JavaScript tool for generating CSS-only polka-dot background patterns using custom variables.
Learning & Tutorials
Learning Resources
Tute 1
Animation with Josh W. ComeauA curated collection of in-depth tutorials on web animations. Topics include springs & bounces, colour shifting, dynamic Bézier curves, and more.
Tute 2
CSS Art by Matt ArnoldLearn how to use CSS to create animated emoji shapes.
Playground & Experiments
Play Resources
Play 1
CodePenAn online playground and community for front-end developers to write, test and share HTML, CSS and JavaScript work (“pens”). Ideal for experimenting with design ideas, turning code into visual results, and browsing thousands of community examples.
Play 2
SVG generators, Tools & Design ResourcesA resource hub full of free SVG generators, color tools, textures, patterns and background creators. Great for building unique graphical assets for web projects — modify gradients, create blobs, fluid shapes, noise textures and more.