CSS SVG Glitch Effect

css-svg-glitch-effect.markdown

CSS SVG Glitch Effect

Glitch effect using only CSS and SVG filters. No Javascript required.

Inspired by this pen: http://codepen.io/lbebber/pen/qEjRYd

A Pen by Jordan on CodePen.

License.

index.html

<h1 class="page_title">CSS SVG Glitch Effect</h1>

<div class="glitch_this">
	<h1>Glitch Text</h1>
</div>
<div class="glitch_this">
	<img src="https://picsum.photos/1024/768?image=1032" />
</div>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<defs>
			<filter id="glitch" x="0" y="0">

				<feColorMatrix in="SourceGraphic" mode="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="r" />
						
				<feOffset in="r" result="r" dx="-5" dy="0">
					<animate attributeName="dx" attributeType="XML" values="-1; .5; 3; -2; .4; .5; 2; 1; -.5; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0;" dur=".5s" repeatCount="indefinite"/>
					<animate attributeName="dy" attributeType="XML" values="2; -1; .4; 2; 1; 3; -.5; 2; 1; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0;" dur="1s" repeatCount="indefinite"/>
				</feOffset>

				<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="g"/>
				
				<feOffset in="g" result="g" dx="-5" dy="0">
					<animate attributeName="dx" attributeType="XML" values="0; 0; 0; 0; 0; 0; 0; 0; 2; -1; .4; 2; 1; 3; -.5; 2; 1; 0; 0; 0; 0; 0; 0; 0; 0;" dur="1.5s" repeatCount="indefinite"/>
					<animate attributeName="dy" attributeType="XML" values="0; 0; 0; 0; 0; 0; 0; 0; -1; .5; 3; -2; .4; .5; 2; 1; -.5; 0; 0; 0; 0; 0; 0; 0; 0;" dur="1s" repeatCount="indefinite"/>
				</feOffset>
				
				<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="b"/>
				
				<feOffset in="b" result="b" dx="5" dy="0">
					<animate attributeName="dx" attributeType="XML" values="0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 2; -1; .4; 2; 1; 3; -.5; 2; 1;" dur="0.35s" repeatCount="indefinite"/>
					<animate attributeName="dy" attributeType="XML" values="0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; -1; .5; 3; -2; .4; .5; 2; 1; -.5;" dur="0.35s" repeatCount="indefinite"/>
				</feOffset>
				
				<feBlend in="r" in2="g" mode="screen" result="blend" />
				
				<feBlend in="blend" in2="b" mode="screen" result="blend" />
			
			</filter>
		</defs>
</svg>

script.js

// No JS

style.css

@import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
body {
	background: #048;
	background: -webkit-linear-gradient(left top, #027, #48a);
	background: -moz-linear-gradient(bottom right, #027, #48a);
	background: linear-gradient(to bottom right, #027, #48a);
	background-attachment: fixed;
	color: #fff;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 140%;
	margin: 0;
	height: 100%;
	padding: 0;
	text-align: center;
	width: 100%;
}
.page_title {
	font-weight: 300;
	line-height: 120%;
	text-shadow: 0 1px 5px rgba(0,0,0,.8);
	text-transform: uppercase;
}

/* PNE STYLES ========== */
.glitch_this {
	-webkit-filter: url("#glitch");
	filter: url("#glitch");
}
.glitch_this:hover {
	cursor: pointer;
	-webkit-filter: none;
	filter: none;
}
.glitch_this img {
	height: auto;
	max-width: 100%;
}