Sky - SVG filters

index.html

<h1 contenteditable> Cause you're a sky full of stars</h1>

<svg>
  <defs>
    <filter id="flyOn">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="15" />
    </filter>
  </defs>
</svg>

script.js

// Insipired by Cris Coyier (Thanks!)
// https://codepen.io/chriscoyier/pen/eBRRLe

sky-svg-filters.markdown

Sky - SVG filters

A Pen by Dali on CodePen.

License.

style.css

body,
html {
  height: 100vh;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: url("#flyOn");
  animation: wavemover 10s infinite alternate linear;
  font-family: 'Rubik Mono One', sans-serif;
  background:
  linear-gradient(#0d4fa7 0%, #3072cc 60%, #6facff 100%);
}

h1 {
  color: #fff;
  font-size: 3.6em;
  max-width: 7ch;
  opacity: .6;
  margin-left: 20%;
}

@keyframes wavemover {
  100% {
    padding-left: 300px;
    transform: translateX(-100px);
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet" />