CascadiaFest: CSS Morning Talks Part 2 Notes

Continuation of Day 1 CascadiaCSS talks. Here’s the second part of the morning.

Gregor Adams: Exploring Fractals in CSS

Examples in nature e.g. Nautilus, Lightning, Tree, Romanesco Broccolli

Background pictures are all based on fractals using CSS.

What is a Fractal?

A natural phenomenon or mathematical set, that exhibits a reapting pattern, that displays at every sacle. If ther replication is exactly the same at every scale, it is called a self similar pattern.

e.g. Mandelbrot set


Implementations of the Mandelbrot algorithm in nearly every programming language on Rosettacode.

All demos live in browser.

Mandelbrot Set in CSS

Wrote it in SASS. Live compiling using box shadows.

Can do in greyscale or colour. Different zoom, zoom point.

Cantor Set in CSS

German mathematician inventor of set theory, and introduced Cantor set

Koch Curve in CSS

gave his name to the famous fractal known as the Koch snowflake, one of the earliest fractal curves.

Instead of removing lines, added lines. Repeated a three part line. THe more you repeat, the more detailed, and the more it looks like a snowflake

Barnsley Fern

researcher and entrepreneur who was worked on fractal compressions, he hold several patents on the technology

Takes random numbers, and runs it through algorithm. The more iterations, the more details. The result looks like a fern leaf.

Fractal Systems

  • IFS: iterated function system –
  • L-System: Lindenmeyer System

Sierpinski Triangle in CSS

pattern of triangles drawn inside triangles. Can be drawn inside or outside.

The CSS never changes, just the variables.

Rep-tile in CSS

3/4 square repeated

L-system Example

intersecting lines that make up hexagons

Circle Fractal in CSS

circle with four smaller circles overlapping on each side

Can turn into the Sierpinski Triangle by removing one of the smaller circles.

Pythagoras Tree in CSS

Can do very artistic things with it. e.g. tree shape with gradient orange colouring

Can do in 3D. Takes a lot of DOM, and very hard to nest, so can crash the browser.


Can do with any shape. Can do artistic fractals

Take a shape and position them one on top of each other with transformations.

Started doing simple animations with it. Change colour based on nesting. Change animation speed based on depth.

Connected it with music and audio visualizer.

Ricardo Vazquez: On the Power of Emotion and Delight: Microinteractions

The experiences we create everyday.

Used to watch his grandpa practice his trombone. He would always ask “Did you listen to the soundwaves go into your chest?”

I was feeling all the emotions when I was listening.

When you feel, the brain blinks.

Study where participants were asked to do normal things (e.g. read), found that alpha and beta waves were transmitted which is normal, but also theta waves, which are normally closely related to aspirational.

They dreamed while they were awake. THey learned better. They remembered better. Because, an adoration for the details. e.g. how the physical item felt, narrative.

“The details are not the details. They make the design.” – Charles Eames


The web had quite a rocky start. It wasn’t met for us when it first started.

Emotion and memory is important for us to remember. Recall is hard.

When something derails our train of thought, like the unicorn, we forget.

How do we improve our memory? Charge them with emotions.

The Emotional Interface

We form the bond as babies by crying and having something fulfilled, which then sends calming signals through our body.

Every single person want to share what we build, create, design.

“Attrative things make people feel good, which in turn makes them think more creatively. How does that makes something easier to use? simple, by making it easier for people to find solutions to the problems they encounter.” – Donald Norman


Atomic Design: What is the smallest thing we can do or change that has the biggest impact?

Sometimes it’s all just a crazy experiment.

It’s all about the interaction between the product and the human being.


  • Visual Polish: carefully crafted, beautiful interface, stunning, beatiful stuff essentially
  • personality: we’ve all experience that bizarre emtional connection that humans can have with an inanimate object. Irrational, but we are emtional beings & thrive off of it. e.g. Firefox, Mailchimp, hipmunk
  • Humour & microcopy: little snippets of helpful text. Provides a really simple way to assist users as they interact with your product. They blend the line between the obstruction and the suggestion. e.g. Sleepbot app – have you really not slept in 7 days? ; Can releave a lot of frustration.
  • purposeful transition: feed back is very important. on the web, we rely, on clear, tactical feedback. e.g. the more you spend the happier the slide icon
  • its’ in the details: intelligently hidden little surprise throughout interface provide a layer of fun that ultimately delight our users. e.g. Google Maps different icons, basecamp signup form where finger points at form fields and face changes when error is made

How can we microinteract? Where do we start?

Build something you love.
Continue improving on your craft, and let your passion just ooze out.

You always start at zero. Let’s not stop at 1, it works. Where is my smile? where is the giggle? Where is the surprise? Where is your happiness?

Go to your favourite websites, find what you love. Find those micro-interactions.

Find your love and don’t let it go.

“It is not enough that we build products that function, that are understand and usable, we also need build products that give joy, excitement, and even beauty into people’s lives.” – Donald Norman

John Brown: spare the art, spoil the nth-child()

This is about creative coding (code art, expressive programming, generative art, visual mathing).

Exploring CSS and see what can be visualized.

No usable code, but lots of usable ideas.

Why Make Art? Why make art with code?

  • Learning is more fun.
  • Freedom: you can do whatever you want. The art is yours.
  • different problems to solve with art e.g. transition

100 Days Challenge

What could you do with 100 days of making?

Tried to make 100 Pure CSS Animations, ended up with 82.

Inspiration from Ana Tudor (CSSConf EU 2013), Google I/O Genesis project, John Brown (CSSConf EU 2014)

Ground Rules & Basics

  • no JavaScript
  • no SVGs
  • has to move
  • no nesting, no ids or classes
  • number of divs, number of days
  • a lot of SASS and a smack of Haml
  • #100daysofndivs


Everyday just make something that’s fun and interesting.

Fun, but would not do it again with the same constraints. Should you try it? Maybe?

Reasons to Art in CSS

  • you already know it.
  • you can do it anywhere
  • discrete objects that can live in the canvas that you’re using
  • pretty devent 3D (you can nest them)
  • learn your craft in a really interesting way
  • no matter what, there is always an output and can transcend the medium

Freedom to Explore

Didn’t do cross-browser testing or optimization. It worked in Chrome on the laptop in use at the time. Done.

The 3 C’s

  • copy – start by copying someone else
  • change – keep pushing and changing
  • chance – happy accidents are all over the place
  • combine – taking all three


Go make art!

2 hours at most

  • Option #1 – go to codepen and for something
  • Option #2 – go to PDF Creative coders / find a local group
  • Option #3 – A Lonely Square – can do anything as long as it returns to being a black square by itself in a field of white. #alonelysquare / – make something and we’ll connect them all together


Break Time

cute piglet

Author: Cynthia

Technologist, Librarian, Metadata and Technical Services expert, Educator, Mentor, Web Developer, UXer, Accessibility Advocate, Documentarian

Leave a Comment

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: