Project 1: Patterns

HTML and CSS don’t always have to convey information; they can be used as drawing tools in the browser. Make a series of patterns to be viewed in the browser using only HTML and CSS. Explore color, shape, regularity, hierarchy, and density in your pattern-making process. There’s no requirement that your patterns be regular. Feel free to push and explore the edges of graphic form in the browser.

Learning Outcomes
familiarity with HTML elements and syntax
familiarity with CSS tagging and positioning
familiarity with commenting & writing shareable code
familiarity working with another person’s code
Interaction through scrolling

Instructions
Use CSS and HTML to create patterns.
Take another classmate’s pattern and develop upon it

Schedule
Week 2 — Sketch out 15 ideas, choose 4 patterns to start coding
Week 3 — Share patterns with class, choose 2 of your classmate's patterns to expand upon
Week 4 — One on ones to look over patterns
Week 5 — Final critique

References
Tauba Auerbach
Karel Martens
Bridget Riley
Frieder Nake
William Morris wallpaper
Conditional Design
Geometric patterns in Islamic Art

Tools
CSS shapes cheatsheet
Learn Layout
CSSmatic