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
<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" />
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
Fun with SVG
By Jo Cranford
Fun with SVG
- 2,031