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?

Sparkly cursors : One donut

SALE ON TODAY

SVG is like an alternate universe version of HTML.

Focused on graphics instead

of documents.

 

Artboard 3

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>

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?

<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

Painting with SVG

By Cassie Evans

Painting with SVG

  • 1,479
Loading comments...

More from Cassie Evans