## Intro

- Original state
- Remove clip [1, 2, 3]
- <path> with arcs
- SVG animation
- SVG filters

## Animating

    <feGaussianBlur in="SourceGraphic" stdDeviation="3">
      <animate id="animglow" attributeName="stdDeviation"
      values="0;30;0" dur="0.75s"
      keySplines="0.42, 0, 1.0, 1.0; 0, 0, 0.58, 1.0"
      calcMode="spline" begin="fadeintext.end"/>
    </feGaussianBlur>

Syncbase animation triggers are awesome!

## Multiple line strokes

    <style>
    .l1 { stroke: white }
    .l2 { stroke: #111 }
    .l3 { stroke: #CC0F16; }
    </style>

    <g id="g1" clip-path="url(#c1)">
      <use xlink:href="#p1" stroke-width="90" class="l3"/>
      <use xlink:href="#p1" stroke-width="60" class="l2"/>
      <use xlink:href="#p1" stroke-width="30" class="l1"/>
    </g>

## Drawing half the stroke

    <clipPath id="c1">
      <path d="m0,300l500,0
      a90,90 0 0 0 0,-180
      a90,90 0 0 0 -90,90
      v45H0"/>
    </clipPath>
    <path id="p1" d="m0,300l500,0
      a90,90 0 0 0 0,-180
      a90,90 0 0 0 -90,90
      v45" fill="none">
    </path>

The radius is chosen such that it's large enough to give a nice arc without causing overlap with the full-width stroke. The arc was split in two parts mostly because it was handy at the time, and to help creating arcs that take other turns. Relative arc commands were used because that makes it easy to tweak other parts of the path without having to rewrite everything that follows. In the clip-path which looks almost the same the path that defines the clipping needs to use it's fill, not the stroke, and so must add a horizontal line back to where the path started (this is the H0 command in this example). Otherwise the path is closed with a straight line from the last position (end last arc endpoint) to the start position which makes it look like a triangle.

## Findings

- Inkscape filters is a great timesaver [1, 2]
- Inkscape could use an arc editing tool
- CSS background vs <image> performance
- Google Chrome renders arcs poorly
- Firefox Nightly has some filter invalidation issues

## SVG Stacks

    svg .icon { display: none }
    svg .icon:target { display: inline }

    <svg viewBox="0 0 32 28">
      <g id="stack" class="icon">
        <polygon points="0,20 16,24 32,20 32,24 16,28 0,24"/>
        <polygon points="0,12 16,16 32,12 32,16 16,20 0,16"/>
        <polygon points="0,4 16,0 32,4 32,8 16,12 0,8"/>
      </g>
    </svg>

Each sub-image in the stack has an id that is used for referencing that particular image. Each <svg> that contains an icon can have a different viewBox. It's possible to have several icons inside the same <svg> fragment if they have the same viewBox, but it's easier for tools to generate separate fragments. If you prefer the id referencing scheme then you should also know that this technique can be used with raster images too, though note that the images need to be data URI's in that case due to restrictions in how <img> elements work in webkit and mozilla browsers (external references not allowed).

## Pros and cons

- Supports colors, animation, filters etc
- Combine with CSS media-queries for LOD
- Easy to read and write
- Fewer HTTP requests
- Resolution-independence (retina screens ♥)
- Not yet widely supported in CSS backgrounds

## Level of detail

    #hours {
      fill: none;
      stroke: #850508;
      stroke-dasharray: 1, 5.28;
      stroke-dashoffset: 0.5;
      stroke-width: 1.5px;
    }
    @media screen and (max-width: 128px) {
      #hours {
        stroke-dasharray: 1, 17.84;
        stroke-width: 2px;
      }
    }
    @media screen and (max-width: 64px) {
      #hours {
        stroke-dasharray: none;
      }
    }

## How to use

- Editing by hand is easy
- Automated: SVG-Stacker

Think about it, how many logos/images does your site use?

## Support for SVG stacks

- Works in <iframe>, <object>, <embed> and <img>
- ...but not yet crossbrowser in CSS backgrounds

The '#svgView(...)' url syntax works in <iframe>, <object>, <embed>, but not in <img> in webkit [1].

## Games on the web

Original: http://cssdeck.com/labs/html5-doodle-jump/8

## Construction

- html
- css
- canvas

## Sprites

- Drawn with canvas drawImage
- Hardcoded sprite positions

As you can see there's not that many resources needed.

## Construction

- EaselJS
- SoundJS
- Box2dWeb
- jQuery
- Zoë

"In order to export all the character animations you see in the game we used Zoë to convert our flash animations to spritesheets. Zoë also works hand in hand with Easel."

## Z-Type

## Canvas rider

## WebGL water

Fullscreen

## WebGL tunnel

Fullscreen

## Cell Cycle

## Construction

- Ported from Processing
- Processing.js
- WebGL

See http://n-e-r-v-o-u-s.com/blog/?p=2295.

## Construction

- WebRTC getUserMedia API for camera access
- WebGL shaders
- Support: Chrome 21, Firefox Nightly, Opera 12 (mobile)

Support: Google Chrome — enabled in Chrome 21 (current release version) Firefox Nightly — enabled in latest Nightly build (v17) Opera 12 — go to opera:config and enable WebGL Opera Mobile 12 — it works on Android! Encountered issues: http://blog.neave.com/post/27907315640/2-million-likes

# The Wilderness of CSS

# Filters

# With Animation

# Pseudo-Elements

# Canvas

# Audio API

# The End

Thanks to the conference organizers!

Slides and examples:

### http://bit.ly/..........FIXME!

◄ ► ▲ ▼