Hello.

I'm Cassie.

I like making creative stuff with my computer.

Cassie Evans

British, born 1989

The permanence of marker.

materials: Marker pen. Face. Walls. Tummy

how does it work tho?

https://www.totallyfreecursors.com/

Sparkly cursors : One donut

SALE ON TODAY

https://makefrontendshitagain.party

https://codepen.io/cassie-codes

https://codepen.io/cassie-codes

SVG is like an alternate universe version of HTML.

Focused on graphics instead

of documents.

 

Artboard 3

https://cassie.codes

https://jim-stoten.com

https://jim-stoten.com

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>

https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/

  <filter id="squiggly">
   <feTurbulence baseFrequency="0.02" numOctaves="3" result="NOISE" seed="1"/>
   <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="1" />
  </filter>

https://heredragonsabound.blogspot.com/2020/02/creating-pencil-effect-in-svg.html

https://css-tricks.com/svg-line-animation-works/

https://www.cassie.codes/posts/creating-my-logo-animation/

Sqigglevision

https://css-tricks.com/squigglevision-in-css-and-svg

amazing name

https://codepen.io/cassie-codes

<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?

<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

Thanks for listening!

Twitter - @cassiecodes
Codepen - @cassie-codes

Painting with SVG

By Cassie Evans

Painting with SVG

  • 6,719

More from Cassie Evans