<div class="target">
<div class="image">
<img src="http://hayachi.github.io/images/hayachi-brown.png" alt="">
</div>
<h1>Squiggly text and image</h1>
<form action="" class="form">
<input type="text" value="SVG Filter">
</form>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter id="squiggly-0">
<feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="4" />
</filter>
<filter id="squiggly-2">
<feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
</filter>
<filter id="squiggly-3">
<feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-4">
<feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
</filter>
</svg>
body{
background: url('http://hayachi.github.io/images/paper.jpeg');
font-family: 'Shadows Into Light Two', cursive;
}
@keyframes squiggly-anim{
0% {
filter:url('#squiggly-0');
}
25% {
filter:url('#squiggly-1');
}
50% {
filter:url('#squiggly-2');
}
75% {
filter:url('#squiggly-3');
}
100% {
filter:url('#squiggly-4');
}
}
.target{
animation:squiggly-anim .34s linear infinite;
color: #544430;
position: absolute;
transform:translateY(-50%);
top:50%;
width: 100%;
font-weight: bold;
h1{
text-align:center;
font-size:40px;
margin-bottom: 15px;
}
}
.image{
width: 150px;
margin: auto;
display: block;
margin-bottom: 15px;
img{
width: 100%;
}
}
.form{
width: 100%;
}
input{
width: 100%;
display: block;
text-align:center;
outline:none;
border:none;
background: none;
font-family: 'Shadows Into Light Two', cursive;
font-size:22px;
color: #544430;
}
View Compiled