Hello.
I'm Cassie.
I like making creative stuff with my computer.
![](https://media1.giphy.com/media/H7CKd1GO6oiZQo7L5d/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7221933/me.jpg)
Cassie Evans
British, born 1989
The permanence of marker.
materials: Marker pen. Face. Walls. Tummy
![](https://media0.giphy.com/media/8Bkr9UJQTuqEnzkOae/giphy.gif)
how does it work tho?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/6258821/Screen_Shot_2019-06-15_at_09.49.29.png)
Sparkly cursors : One donut
![](https://media3.giphy.com/media/bd4td7PlhYY9i/giphy.gif)
![](https://media1.giphy.com/media/keZio9wR0dCwwEUH7H/giphy.gif)
SALE ON TODAY
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7222048/pasted-from-clipboard.png)
SVG is like an alternate universe version of HTML.
Focused on graphics instead
of documents.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7222292/EFXRcS1XsAAVafb.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7222299/D44AOZ2W0AAxTwR.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7222343/D6Eq1eZWAAEzcKg.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7224405/Image_from_iOS__21_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7224411/Image_from_iOS__20_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7224405/Image_from_iOS__21_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7224411/Image_from_iOS__20_.jpg)
Can we recreate some of this texture with SVG?
<svg>
<defs>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
</defs>
<g filter="url(#squiggly)">
<!-- stuff with filter applied -->
</g>
</svg>
SVG Filters
Filter primitives live inside a filter element and create different graphic effects that can be applied to both SVG and HTML elements
<svg>
<defs>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
</defs>
<g filter="url(#squiggly)">
<!-- stuff with filter applied -->
</g>
</svg>
SVG Filters
Filter primitives live inside a filter element and create different graphic effects that can be applied to both SVG and HTML elements
<svg>
<defs>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
</defs>
<g filter="url(#squiggly)">
<!-- stuff with filter applied -->
</g>
</svg>
SVG Filters
Filter primitives live inside a filter element and create different graphic effects that can be applied to both SVG and HTML elements
.element {
filter: blur(5px);
}
you know CSS Filters?
.element {
filter: url(#our-filter);
}
Same same but different.
<svg>
<defs>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
</defs>
<g filter="url(#squiggly)">
<!-- stuff with filter applied -->
</g>
</svg>
SVG Filters
Filter primitives live inside a filter element and create different graphic effects that can be applied to both SVG and HTML elements
<svg>
<defs>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
</defs>
<g filter="url(#squiggly)">
<!-- stuff with filter applied -->
</g>
</svg>
SVG Filters
Filter primitives live inside a filter element and create different graphic effects that can be applied to both SVG and HTML elements
<svg>
<defs>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
</defs>
<g filter="url(#squiggly)">
<!-- stuff with filter applied -->
</g>
</svg>
SVG Filters
Filter primitives live inside a filter element and create different graphic effects that can be applied to both SVG and HTML elements
<svg>
<defs>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
</defs>
<g filter="url(#squiggly)">
<!-- stuff with filter applied -->
</g>
</svg>
SVG Filters
Filter primitives live inside a filter element and create different graphic effects that can be applied to both SVG and HTML elements
<filter id="squiggly">
<feTurbulence baseFrequency="0.05" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
<filter id="squiggly">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
</filter>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7224887/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7224435/drkatz.gif)
Sqigglevision
amazing name
<svg>
<defs>
<filter id="squiggly1"></filter>
<filter id="squiggly2"></filter>
<filter id="squiggly3"></filter>
</defs>
</svg>
#illustration {
animation: squigglevision 0.5s infinite alternate;
}
@keyframes squigglevision {
0% {
filter: url('#squiggly1');
}
50% {
filter: url('#squiggly2');
}
100% {
filter: url('#squiggly3');
}
}
SQUIGGLE VISION
https://codepen.io/davidkpiano
Pencil effects are cool.
But what about paint effects?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7225048/fig-05-color-matrix-visual.jpg)
<feColorMatrix in="NOISE" type="matrix" color-interpolation-filters="sRGB"
values="0.61 0 0 0 0
0 0.96 0 0 0
0 0 0.99 0 0
0 0 0 1 0 "
result="COLOURED-NOISE" ></feColorMatrix>
feColorMatrix
https://viewbox.club
![](https://s3.amazonaws.com/media-p.slid.es/uploads/762606/images/7225108/pasted-from-clipboard.png)
Thanks for listening!