Skip to content

Instantly share code, notes, and snippets.

@lostfictions

lostfictions/arve.html

Created April 10, 2016 17:48
Show Gist options
  • Save lostfictions/ad0d1b97e6260c1f87a1a5f4ca9e62d7 to your computer and use it in GitHub Desktop.
Save lostfictions/ad0d1b97e6260c1f87a1a5f4ca9e62d7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
arve.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>avre</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.squiggle {
animation: squiggleanim 0.3s infinite;
max-height: 100vh;
max-width: 100vw;
}
@keyframes squiggleanim {
0% {
-webkit-filter: url("#squiggly-0");
filter: url("#squiggly-0");
}
25% {
-webkit-filter: url("#squiggly-1");
filter: url("#squiggly-1");
}
50% {
-webkit-filter: url("#squiggly-2");
filter: url("#squiggly-2");
}
75% {
-webkit-filter: url("#squiggly-3");
filter: url("#squiggly-3");
}
100% {
-webkit-filter: url("#squiggly-4");
filter: url("#squiggly-4");
}
}
body {
background-color: #B1FFF5;
margin: 0;
padding: 0;
}
.flex {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="flex">
<svg class="squiggle" x="0px"
y="0px" width="1280px" height="800px" viewBox="0 0 1280 800" xml:space="preserve">
<g id="Main">
<path fill="#FF8791" d="M824.681,439.355c24.542-13.649,41.154-39.832,41.154-69.906c0-44.154-35.794-79.949-79.949-79.949
c-2.996,0-5.95,0.179-8.86,0.5H646v221h35.444H786h80.044L824.681,439.355z"/>
<polygon fill="#FFBD75" points="626.544,290 498.743,511.355 370.944,290 "/>
<polygon fill="#FFEA83" points="191.944,511 319.744,289.645 447.544,511 "/>
<polygon fill="#D9A4FF" points="961,437 1015,437 1015,400.5 1015,363.167 961,363.5 961,362 1065.056,362 1024.624,290 889,290
889,511 1088,511 1088,439 961,439 "/>
</g>
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment