Fun with SVG

Writing and Goo

Jo Cranford

@jocranford

Thanks to

@cssconfau

and

Sara Soueiden

for the inspiration 

Things that looked like fun ...

http://slides.com/sarasoueidan/building-better-interfaces-with-svg

http://tympanus.net/Development/CreativeGooeyEffects/send.html

What is SVG?

Image?

A text-based graphics language that describes images with vector shapes, text, paths, and embedded raster graphics

"Writing"

Using Path and Stroke Dash

stroke-dasharray="10 10"

stroke-dasharray="50 50"

stroke-dasharray="600 600"

Stroke Dash Offset

stroke-dasharray="50 50"
stroke-dashoffset="25"

stroke-dasharray="50 50"

Stroke Dash Offset

stroke-dasharray="600 600"
stroke-dashoffset="600"

stroke-dasharray="600 600"

The Code

<div class='my-name'>
  <input type="checkbox" id="option"/>
  <label for="option">Write my name
    <svg xmlns="http://www.w3.org/2000/svg">
      <g fill="none" stroke="#000" stroke-width="3">
       <path d="..." stroke-dasharray="123" stroke-dashoffset="123" />
      </g>
    </svg>
  </label>
</div>

The Code

label svg #Path-1 {
  transition: stroke-dashoffset .4s linear;
}

input[type="checkbox"]:checked ~ label svg path {
  stroke-dashoffset: 0;
}

input[type="checkbox"] {
  opacity: 0;
  width: 40px;
  height: 40px;
}

Writing My Name

"Goo"

SVG Filters

feBlend

feColorMatrix

feComponentTransfer

feComposite

feConvolveMatrix

feDiffuseLighting

feDisplacementMap

feFlood

feGaussianBlur

feImage

feMerge

feMorphology

feOffset

feSpecularLighting

feTile

feTurbulence

feDistantLight

fePointLight

feSpotLight

Blurring into Goo

The Code

<ul class='goo'>
  <li class='circle'></li>
  <li class='circle'></li>
</ul>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
      <feColorMatrix in="blur" mode="matrix" 
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
    </filter>
  </defs>
</svg>

The Code

.goo {
  -webkit-filter: url("#goo");
  filter: url("../goo.html#goo");
}

.circle {
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.circle:nth-child(1) {
  animation-name: firstcircle;
}

@keyframes firstcircle {
  0% {left: $original-left;}
  50% {left: $original-left - (2.5 * $left-spread);}
  100% {left: $original-left;}
}

The Animation

Warning!

Thank You!

P.S. We're hiring!

jo@cultureamp.com

http://cultureamp.com/join_us.html