svg.js filters

In this example below you will see how to do a svg.js filters with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rdfriedl, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rdfriedl ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>svg.js filters</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg id="svg"></svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.5/svg.min.js'></script>
<script src='https://cdn.rawgit.com/rdfriedl/svg.filter.js/fc69bb6e2dd0b815497bd048ec47aebc0ec592dd/svg.filter.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rdfriedl/svgjs-filters-QbqQag */
@import url(https://fonts.googleapis.com/css?family=Ultra);
body{
	margin: 0px;
	overflow: hidden;
}

/*Downloaded from https://www.codeseek.co/rdfriedl/svgjs-filters-QbqQag */
var width = window.innerWidth;
var height = window.innerHeight;
var svg = SVG('svg').size(width,height);

var f = new SVG.Filter;
f.displacementMap('SourceGraphic',f.turbulence(0.08,1,1),9);

var f2 = new SVG.Filter();
f2.convolveMatrix('1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1').attr({
	order: "8,8",
	divisor: "1"
}).in(f2.sourceAlpha)
.offset(4,4)
.gaussianBlur(2)
.merge('SourceGraphic');

var f3 = new SVG.Filter();
f3.autoSetIn = false;
f3.composite(f3.flood('#ff0000',0.5),f3.sourceAlpha,'in').result('red-text');
f3.composite(f3.flood('#00ff00',0.5),f3.sourceAlpha,'in').result('green-text');
f3.composite(f3.flood('#0000ff',0.5),f3.sourceAlpha,'in').result('blue-text');
f3.displacementMap('red-text',f3.turbulence(0.08,1,1),9).result('red-text');
f3.displacementMap('green-text',f3.turbulence(0.08,1,2),9).result('green-text');
f3.displacementMap('blue-text',f3.turbulence(0.08,1,3),9).result('blue-text');
f3.offset(-10,0).in('red-text').result('red-text');
f3.offset(10,0).in('green-text').result('green-text');
f3.offset(0,0).in('blue-text').result('blue-text');
f3.merge('red-text','green-text','blue-text');

var f4 = new SVG.Filter()
f4.autoSetIn = false;
f4.morphology('dilate',4).in(f4.source).result('outline-1');
f4.morphology('dilate',4).in('outline-1').result('outline-2');
f4.morphology('dilate',4).in('outline-2').result('outline-3');
var r=1, g=1, b=1,a=1
f4.colorMatrix('matrix',[0, 0, 0, 0, r, 
						 0, 0, 0, 0, g,
						 0, 0, 0, 0, b,
						 0, 0, 0, a, 0 ]).in('outline-1').result('outline-1');
var r=0, g=0, b=1,a=1
f4.colorMatrix('matrix',[0, 0, 0, 0, r, 
						 0, 0, 0, 0, g,
						 0, 0, 0, 0, b,
						 0, 0, 0, a, 0 ]).in('outline-2').result('outline-2');
var r=0, g=0, b=0,a=1
f4.colorMatrix('matrix',[0, 0, 0, 0, r, 
						 0, 0, 0, 0, g,
						 0, 0, 0, 0, b,
						 0, 0, 0, a, 0 ]).in('outline-3').result('outline-3');
f4.merge('outline-3','outline-2','outline-1',f4.source)

var text = svg.text('Text')
	.font({
		size: '120px',
		'font-family': "'Ultra', serif"
	})
	.center(width/2,height/2-150);
text.filter(f);

var text = svg.text('Text')
	.font({
		size: '120px',
		'font-family': "'Ultra', serif"
	})
	.center(width/2,height/2-50);
text.filter(f3);

var text = svg.text('Text')
	.fill('green')
	.font({
		size: '120px',
		'font-family': "'Ultra', serif"
	})
	.center(width/2,height/2+50);
text.filter(f4);

var text = svg.text('Text')
	.fill('grey')
	.font({
		size: '120px',
		'font-family': "'Ultra', serif"
	})
	.center(width/2,height/2+150);
text.filter(f2);

Comments