7+ JavaScript Subscribe Form Examples

This post contains a total of 7+ JavaScript Subscribe ( Newsletter ) Form Examples with Source Code. All these Subscribe Forms are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Subscribe Form Examples

1. By Boris Yastrebov

Made by Boris Yastrebov. Cool animated Subscribe Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Lato", sans-serif;
  background: url("https://user-images.githubusercontent.com/23297041/54643510-2196c180-4aa8-11e9-9d98-06c2bdc59761.png");
  background-size: cover;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  margin: 12px 0;
}

.heading {
  font-size: 42px;
  font-weight: 700;
  color: #343c41;
}

.subheading {
  font-size: 18px;
  line-height: 24px;
  color: #b2bcc2;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input {
  width: auto;
  padding: 10px 8px;
  border: 1.5px solid #cfd5d8;
  border-radius: 4px;
  text-align: center;
  transition: all 0.4s linear;
}
.input::-moz-placeholder {
  opacity: 0.35;
}
.input:-ms-input-placeholder {
  opacity: 0.35;
}
.input::placeholder {
  opacity: 0.35;
}
.input:focus, .input:hover, .input:valid {
  outline: none;
  border: 1.5px solid #b2defe;
}

.btn {
  padding: 12px 32px;
  background-color: #1b9cfc;
  font-size: 17px;
  letter-spacing: 0.5px;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  transition: all 0.4s ease-in-out;
  opacity: 0.45;
  cursor: pointer;
}
.btn--active {
  -webkit-animation: buttonActive 0.3s both;
          animation: buttonActive 0.3s both;
}
.btn--success {
  -webkit-animation: buttonSuccess 0.4s both;
          animation: buttonSuccess 0.4s both;
}
.btn:focus {
  outline: none;
}

.subscribe {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 625px;
  min-height: 465px;
  border-radius: 9px;
  background-color: #ffffff;
  box-shadow: 13px 15px 79px 6px rgba(0, 0, 0, 0.1);
}
.subscribe__image {
  position: relative;
  max-width: 80px;
  margin: 50px 10px 0;
}
.subscribe__image--success:after {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  background-image: url("https://user-images.githubusercontent.com/23297041/53911760-6c581880-4068-11e9-90ab-ac45ae3b4aa8.png");
  background-size: cover;
  content: "";
  -webkit-animation: slideUp 0.3s ease-out;
          animation: slideUp 0.3s ease-out;
}
.subscribe__text {
  max-width: 300px;
  margin-bottom: 30px;
  text-align: center;
}
.subscribe__input {
  min-width: 250px;
  margin-bottom: 15px;
}
.subscribe__btn {
  width: 180px;
}

@-webkit-keyframes buttonActive {
  to {
    transform: translateY(-1px);
    opacity: 1;
  }
}

@keyframes buttonActive {
  to {
    transform: translateY(-1px);
    opacity: 1;
  }
}
@-webkit-keyframes buttonSuccess {
  from {
    opacity: 1;
  }
  to {
    width: 230px;
    background-color: #53ce67;
    opacity: 1;
  }
}
@keyframes buttonSuccess {
  from {
    opacity: 1;
  }
  to {
    width: 230px;
    background-color: #53ce67;
    opacity: 1;
  }
}
@-webkit-keyframes slideUp {
  from {
    transform: translateY(15px);
  }
}
@keyframes slideUp {
  from {
    transform: translateY(15px);
  }
}
@media screen and (max-width: 680px) {
  .subscribe {
    min-width: 350px;
  }
}
</style>
</head>
<body>
  <div class='subscribe'>
    <div class='subscribe__image'>
      <img src='https://user-images.githubusercontent.com/23297041/53905033-9570ad00-4058-11e9-809d-c090c0468264.png'> 
    </div>
    <div class='subscribe__text'>
      <p class='heading'>Stay tuned</p>
      <p class='subheading'>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>
    <form class='form' id='form'>
      <input class='subscribe__input input' type='email' placeholder='Enter your email' required>
      <input class='subscribe__btn btn' type='submit' value='Subscribe'>
    </form>
  </div>
      <script>
const form = document.getElementById('form');
const formInput = document.querySelector('.subscribe__input');
const formBtn = document.querySelector('.subscribe__btn');
const subscribeImg = document.querySelector('.subscribe__image');

formInput.addEventListener('input', () => {
  formInput.checkValidity() ? formBtn.classList.add('btn--active') : formBtn.classList.remove('btn--active');
});

form.addEventListener('submit', e => {
  e.preventDefault();

  subscribeImg.classList.add('subscribe__image--success');
  formBtn.classList.add('btn--success');
  formBtn.value = "You're on the list! ๐Ÿ‘";

  formInput.disabled = true;
  formBtn.disabled = true;
});
    </script>
</body>
</html>

2. By Adam Kuhn

Made by Adam Kuhn. JavaScript Subscribe form with Roller Coaster Loading Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: "Roboto Mono";
  background: #fff;
  -webkit-animation: squiggly-anim 0.4s infinite;
          animation: squiggly-anim 0.4s infinite;
}
@-webkit-keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    -webkit-filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    -webkit-filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
body .abyss {
  width: 80px;
  height: 200px;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 500px);
  border-radius: 100%;
  z-index: 9999;
  transform: translateX(-50vw);
  transition: 1s ease-in-out;
  transition-delay: 0s;
}
@media (max-width: 1000px) {
  body .abyss {
    left: 50%;
    transform: translateX(-100vw);
  }
}
body .abyss:nth-of-type(2) {
  z-index: -1;
}
body .abyss:nth-of-type(2):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 17.5px;
  border-radius: 100%;
  background: #222;
}
body .abyss:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 300px;
  top: -50px;
  right: 50%;
  background: linear-gradient(to bottom, transparent 50px, #222 50px, #222 51px, #fff 51px, #fff 249px, #222 249px, #222 250px, transparent 250px);
  z-index: -1;
  -webkit-mask: radial-gradient(ellipse at right, transparent 0%, transparent 50%, #fff 50%);
          mask: radial-gradient(ellipse at right, transparent 0%, transparent 50%, #fff 50%);
}
body .abyss:after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 300px;
  top: -50px;
  right: 150%;
  background: linear-gradient(to bottom, transparent 50px, #222 50px, #222 51px, #fff 51px, #fff 249px, #222 249px, #222 250px, transparent 250px);
  z-index: -1;
}
body.submitted .abyss {
  transition-delay: 11.5s;
  transform: translateX(0);
}
body.submitted form {
  opacity: 0;
}
body.submitted form input[type=email] {
  color: transparent;
  background: rgba(255, 255, 255, 0);
}
body form {
  position: absolute;
  z-index: 9999;
  width: 500px;
  left: calc(50% - 280px);
  margin-left: 30px;
  height: 45px;
  top: calc(50% + 24px);
  transition: opacity 0.3s ease-in-out;
  transition-delay: 1s;
  overflow: hidden;
}
body form input {
  box-shadow: inset 0 0 0 1px #222;
  box-sizing: border-box;
  outline: none;
}
body form input[type=email] {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: transparent;
  border: none;
  width: 100%;
  padding: 0 5px;
  font-family: "Roboto Mono";
  font-size: 25px;
  letter-spacing: 1.5px;
  background: white;
  transition: 0.3s ease-in-out;
}
body form input[type=submit] {
  left: auto;
  right: 0;
  position: absolute;
  height: 100%;
  width: 150px;
  background: #222;
  color: #fff;
  border: none;
  font-family: "Roboto Mono";
  font-size: 25px;
  transform-origin: right;
  transition: transform 0.3s ease-in-out, color 0.2s ease-in-out;
  transition-delay: 0.3s, 0s;
  cursor: pointer;
}
body .wrap {
  width: 500px;
  height: 100%;
  position: absolute;
  z-index: 999;
  left: calc(50% - 280px);
}
body .wrap:after {
  content: "";
  position: absolute;
  width: 1000vw;
  height: 100vh;
  top: calc(50% + 135px);
  left: -50vw;
  box-shadow: 0 -1px 0 0 #222;
  z-index: -1;
}
body .wrap svg g rect {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: 1s ease-in-out;
  fill: #fff;
  stroke: url(#Gradient4);
  stroke-width: 0.2;
  rx: 1;
}
body .wrap svg foreignObject .char {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0px;
  color: transparent;
  line-height: 0;
}
body .wrap svg foreignObject .char:nth-of-type(1) {
  offset-distance: calc(0% + 1.875px);
}
body .wrap svg foreignObject .char:nth-of-type(1).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(1):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(2) {
  offset-distance: calc(0% + 3.75px);
}
body .wrap svg foreignObject .char:nth-of-type(2).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(2):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(3) {
  offset-distance: calc(0% + 5.625px);
}
body .wrap svg foreignObject .char:nth-of-type(3).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(3):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(4) {
  offset-distance: calc(0% + 7.5px);
}
body .wrap svg foreignObject .char:nth-of-type(4).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(4):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(5) {
  offset-distance: calc(0% + 9.375px);
}
body .wrap svg foreignObject .char:nth-of-type(5).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(5):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(6) {
  offset-distance: calc(0% + 11.25px);
}
body .wrap svg foreignObject .char:nth-of-type(6).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(6):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(7) {
  offset-distance: calc(0% + 13.125px);
}
body .wrap svg foreignObject .char:nth-of-type(7).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(7):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(8) {
  offset-distance: calc(0% + 15px);
}
body .wrap svg foreignObject .char:nth-of-type(8).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(8):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(9) {
  offset-distance: calc(0% + 16.875px);
}
body .wrap svg foreignObject .char:nth-of-type(9).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(9):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(10) {
  offset-distance: calc(0% + 18.75px);
}
body .wrap svg foreignObject .char:nth-of-type(10).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(10):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(11) {
  offset-distance: calc(0% + 20.625px);
}
body .wrap svg foreignObject .char:nth-of-type(11).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(11):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(12) {
  offset-distance: calc(0% + 22.5px);
}
body .wrap svg foreignObject .char:nth-of-type(12).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(12):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(13) {
  offset-distance: calc(0% + 24.375px);
}
body .wrap svg foreignObject .char:nth-of-type(13).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(13):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(14) {
  offset-distance: calc(0% + 26.25px);
}
body .wrap svg foreignObject .char:nth-of-type(14).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(14):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(15) {
  offset-distance: calc(0% + 28.125px);
}
body .wrap svg foreignObject .char:nth-of-type(15).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(15):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(16) {
  offset-distance: calc(0% + 30px);
}
body .wrap svg foreignObject .char:nth-of-type(16).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(16):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(17) {
  offset-distance: calc(0% + 31.875px);
}
body .wrap svg foreignObject .char:nth-of-type(17).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(17):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(18) {
  offset-distance: calc(0% + 33.75px);
}
body .wrap svg foreignObject .char:nth-of-type(18).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(18):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(19) {
  offset-distance: calc(0% + 35.625px);
}
body .wrap svg foreignObject .char:nth-of-type(19).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(19):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(20) {
  offset-distance: calc(0% + 37.5px);
}
body .wrap svg foreignObject .char:nth-of-type(20).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(20):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(21) {
  offset-distance: calc(0% + 39.375px);
}
body .wrap svg foreignObject .char:nth-of-type(21).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(21):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(22) {
  offset-distance: calc(0% + 41.25px);
}
body .wrap svg foreignObject .char:nth-of-type(22).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(22):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(23) {
  offset-distance: calc(0% + 43.125px);
}
body .wrap svg foreignObject .char:nth-of-type(23).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(23):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(24) {
  offset-distance: calc(0% + 45px);
}
body .wrap svg foreignObject .char:nth-of-type(24).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(24):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(25) {
  offset-distance: calc(0% + 46.875px);
}
body .wrap svg foreignObject .char:nth-of-type(25).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(25):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(26) {
  offset-distance: calc(0% + 48.75px);
}
body .wrap svg foreignObject .char:nth-of-type(26).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(26):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(27) {
  offset-distance: calc(0% + 50.625px);
}
body .wrap svg foreignObject .char:nth-of-type(27).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(27):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(28) {
  offset-distance: calc(0% + 52.5px);
}
body .wrap svg foreignObject .char:nth-of-type(28).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(28):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(29) {
  offset-distance: calc(0% + 54.375px);
}
body .wrap svg foreignObject .char:nth-of-type(29).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(29):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(30) {
  offset-distance: calc(0% + 56.25px);
}
body .wrap svg foreignObject .char:nth-of-type(30).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(30):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(31) {
  offset-distance: calc(0% + 58.125px);
}
body .wrap svg foreignObject .char:nth-of-type(31).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(31):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(32) {
  offset-distance: calc(0% + 60px);
}
body .wrap svg foreignObject .char:nth-of-type(32).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(32):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(33) {
  offset-distance: calc(0% + 61.875px);
}
body .wrap svg foreignObject .char:nth-of-type(33).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(33):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(34) {
  offset-distance: calc(0% + 63.75px);
}
body .wrap svg foreignObject .char:nth-of-type(34).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(34):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(35) {
  offset-distance: calc(0% + 65.625px);
}
body .wrap svg foreignObject .char:nth-of-type(35).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(35):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(36) {
  offset-distance: calc(0% + 67.5px);
}
body .wrap svg foreignObject .char:nth-of-type(36).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(36):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(37) {
  offset-distance: calc(0% + 69.375px);
}
body .wrap svg foreignObject .char:nth-of-type(37).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(37):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(38) {
  offset-distance: calc(0% + 71.25px);
}
body .wrap svg foreignObject .char:nth-of-type(38).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(38):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(39) {
  offset-distance: calc(0% + 73.125px);
}
body .wrap svg foreignObject .char:nth-of-type(39).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(39):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap svg foreignObject .char:nth-of-type(40) {
  offset-distance: calc(0% + 75px);
}
body .wrap svg foreignObject .char:nth-of-type(40).empty div {
  display: none;
}
body .wrap svg foreignObject .char:nth-of-type(40):before {
  color: #222;
  content: attr("data-char");
  position: absolute;
  font-size: 3px;
  left: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.25px;
}
body .wrap .char {
  font-size: 0px;
  color: transparent;
  line-height: 0;
  position: absolute;
  height: 1.875px;
  width: 1.875px;
  margin-top: -4px;
  offset-path: path("M43.4,116h0c26.71.09,101-.19,121.5,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.36,148.36,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.72-22.55,3c-13.19-.16-79.81.06-91.23,0-5.63,0,34.82.24,29.2,0");
  offset-rotate: auto;
  transition: 10s ease-in-out;
}
body .wrap .char:before {
  content: attr(data-char);
  color: #222;
  font-size: 3px;
}
body .wrap .char div {
  position: absolute;
  height: 55%;
  width: 100%;
  z-index: 2;
  bottom: 0;
  left: 0;
}
body .wrap .char div:after {
  content: "";
  position: absolute;
  width: 1.75px;
  height: 1.75px;
  border-radius: 100%;
  background: radial-gradient(circle at center, #222 0.15px, #fff 0.15px, #fff 0.65px, #222 0.65px, #222 0.75px, transparent 0.75px);
  z-index: 0;
  bottom: -2px;
  right: 0;
  opacity: 0;
}
body .wrap .char div:before {
  content: "";
  position: absolute;
  width: 250%;
  height: 5.25px;
  left: -30%;
  top: -2.5px;
  z-index: 2;
  background: #222;
  border-radius: 0;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
body.submitted svg #coaster-track, body.submitted svg #coaster-track2 {
  transition: 7s ease-in-out;
  transition-delay: 0s;
}
body.submitted svg foreignObject .char div:before {
  -webkit-animation: growIn 0.5s ease-in-out 1 forwards;
          animation: growIn 0.5s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  border-radius: 50px;
}
@-webkit-keyframes growIn {
  from {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
            clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
  }
}
@keyframes growIn {
  from {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
            clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
  }
}
body.submitted svg foreignObject .char div:after {
  -webkit-animation: growIn2 0.5s ease-in-out 1 forwards;
          animation: growIn2 0.5s ease-in-out 1 forwards;
  -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0% 100%);
          clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0% 100%);
}
@-webkit-keyframes growIn2 {
  from {
    opacity: 1;
    bottom: -1px;
  }
  to {
    opacity: 1;
    bottom: -3px;
  }
}
@keyframes growIn2 {
  from {
    opacity: 1;
    bottom: -1px;
  }
  to {
    opacity: 1;
    bottom: -3px;
  }
}
body.submitted .wrap {
  -webkit-animation: travel 10s ease-in-out 1 forwards;
          animation: travel 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
@-webkit-keyframes travel {
  42.5% {
    transform: scale(0.5) translateX(-3700px);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes travel {
  42.5% {
    transform: scale(0.5) translateX(-3700px);
  }
  100% {
    transform: translateX(0%);
  }
}
body.submitted .wrap svg g rect {
  -webkit-animation: grow 0.75s ease-in-out 1 forwards;
          animation: grow 0.75s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
@-webkit-keyframes grow {
  to {
    transform: scaleY(1);
  }
}
@keyframes grow {
  to {
    transform: scaleY(1);
  }
}
body.submitted .wrap svg foreignObject {
  -webkit-animation: fall 3s ease-in-out 1 forwards;
          animation: fall 3s ease-in-out 1 forwards;
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}
@media (max-width: 768px) {
  body.submitted .wrap svg foreignObject {
    -webkit-animation-duration: 6s;
            animation-duration: 6s;
  }
}
@-webkit-keyframes fall {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(calc(-100vw - 500px));
    opacity: 0;
  }
}
@keyframes fall {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(calc(-100vw - 500px));
    opacity: 0;
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(1) {
  -webkit-animation: coast 10s linear 1 forwards, ride1 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride1 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(1) div:after {
  -webkit-animation-delay: 2.95s;
          animation-delay: 2.95s;
}
@-webkit-keyframes ride1 {
  to {
    offset-distance: calc((100% + 1.875px) + -73.125px);
  }
}
@keyframes ride1 {
  to {
    offset-distance: calc((100% + 1.875px) + -73.125px);
  }
}
@-webkit-keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(2) {
  -webkit-animation: coast 10s linear 1 forwards, ride2 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride2 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(2) div:after {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}
@-webkit-keyframes ride2 {
  to {
    offset-distance: calc((100% + 1.875px) + -71.25px);
  }
}
@keyframes ride2 {
  to {
    offset-distance: calc((100% + 1.875px) + -71.25px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(3) {
  -webkit-animation: coast 10s linear 1 forwards, ride3 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride3 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(3) div:after {
  -webkit-animation-delay: 2.85s;
          animation-delay: 2.85s;
}
@-webkit-keyframes ride3 {
  to {
    offset-distance: calc((100% + 1.875px) + -69.375px);
  }
}
@keyframes ride3 {
  to {
    offset-distance: calc((100% + 1.875px) + -69.375px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(4) {
  -webkit-animation: coast 10s linear 1 forwards, ride4 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride4 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(4) div:after {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
@-webkit-keyframes ride4 {
  to {
    offset-distance: calc((100% + 1.875px) + -67.5px);
  }
}
@keyframes ride4 {
  to {
    offset-distance: calc((100% + 1.875px) + -67.5px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(5) {
  -webkit-animation: coast 10s linear 1 forwards, ride5 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride5 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(5) div:after {
  -webkit-animation-delay: 2.75s;
          animation-delay: 2.75s;
}
@-webkit-keyframes ride5 {
  to {
    offset-distance: calc((100% + 1.875px) + -65.625px);
  }
}
@keyframes ride5 {
  to {
    offset-distance: calc((100% + 1.875px) + -65.625px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(6) {
  -webkit-animation: coast 10s linear 1 forwards, ride6 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride6 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(6) div:after {
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}
@-webkit-keyframes ride6 {
  to {
    offset-distance: calc((100% + 1.875px) + -63.75px);
  }
}
@keyframes ride6 {
  to {
    offset-distance: calc((100% + 1.875px) + -63.75px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(7) {
  -webkit-animation: coast 10s linear 1 forwards, ride7 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride7 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(7) div:after {
  -webkit-animation-delay: 2.65s;
          animation-delay: 2.65s;
}
@-webkit-keyframes ride7 {
  to {
    offset-distance: calc((100% + 1.875px) + -61.875px);
  }
}
@keyframes ride7 {
  to {
    offset-distance: calc((100% + 1.875px) + -61.875px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(8) {
  -webkit-animation: coast 10s linear 1 forwards, ride8 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride8 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(8) div:after {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
@-webkit-keyframes ride8 {
  to {
    offset-distance: calc((100% + 1.875px) + -60px);
  }
}
@keyframes ride8 {
  to {
    offset-distance: calc((100% + 1.875px) + -60px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(9) {
  -webkit-animation: coast 10s linear 1 forwards, ride9 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride9 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(9) div:after {
  -webkit-animation-delay: 2.55s;
          animation-delay: 2.55s;
}
@-webkit-keyframes ride9 {
  to {
    offset-distance: calc((100% + 1.875px) + -58.125px);
  }
}
@keyframes ride9 {
  to {
    offset-distance: calc((100% + 1.875px) + -58.125px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(10) {
  -webkit-animation: coast 10s linear 1 forwards, ride10 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride10 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(10) div:after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
@-webkit-keyframes ride10 {
  to {
    offset-distance: calc((100% + 1.875px) + -56.25px);
  }
}
@keyframes ride10 {
  to {
    offset-distance: calc((100% + 1.875px) + -56.25px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(11) {
  -webkit-animation: coast 10s linear 1 forwards, ride11 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride11 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(11) div:after {
  -webkit-animation-delay: 2.45s;
          animation-delay: 2.45s;
}
@-webkit-keyframes ride11 {
  to {
    offset-distance: calc((100% + 1.875px) + -54.375px);
  }
}
@keyframes ride11 {
  to {
    offset-distance: calc((100% + 1.875px) + -54.375px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(12) {
  -webkit-animation: coast 10s linear 1 forwards, ride12 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride12 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(12) div:after {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
@-webkit-keyframes ride12 {
  to {
    offset-distance: calc((100% + 1.875px) + -52.5px);
  }
}
@keyframes ride12 {
  to {
    offset-distance: calc((100% + 1.875px) + -52.5px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(13) {
  -webkit-animation: coast 10s linear 1 forwards, ride13 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride13 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(13) div:after {
  -webkit-animation-delay: 2.35s;
          animation-delay: 2.35s;
}
@-webkit-keyframes ride13 {
  to {
    offset-distance: calc((100% + 1.875px) + -50.625px);
  }
}
@keyframes ride13 {
  to {
    offset-distance: calc((100% + 1.875px) + -50.625px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(14) {
  -webkit-animation: coast 10s linear 1 forwards, ride14 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride14 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(14) div:after {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}
@-webkit-keyframes ride14 {
  to {
    offset-distance: calc((100% + 1.875px) + -48.75px);
  }
}
@keyframes ride14 {
  to {
    offset-distance: calc((100% + 1.875px) + -48.75px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(15) {
  -webkit-animation: coast 10s linear 1 forwards, ride15 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride15 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(15) div:after {
  -webkit-animation-delay: 2.25s;
          animation-delay: 2.25s;
}
@-webkit-keyframes ride15 {
  to {
    offset-distance: calc((100% + 1.875px) + -46.875px);
  }
}
@keyframes ride15 {
  to {
    offset-distance: calc((100% + 1.875px) + -46.875px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(16) {
  -webkit-animation: coast 10s linear 1 forwards, ride16 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride16 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(16) div:after {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
@-webkit-keyframes ride16 {
  to {
    offset-distance: calc((100% + 1.875px) + -45px);
  }
}
@keyframes ride16 {
  to {
    offset-distance: calc((100% + 1.875px) + -45px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(17) {
  -webkit-animation: coast 10s linear 1 forwards, ride17 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride17 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(17) div:after {
  -webkit-animation-delay: 2.15s;
          animation-delay: 2.15s;
}
@-webkit-keyframes ride17 {
  to {
    offset-distance: calc((100% + 1.875px) + -43.125px);
  }
}
@keyframes ride17 {
  to {
    offset-distance: calc((100% + 1.875px) + -43.125px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(18) {
  -webkit-animation: coast 10s linear 1 forwards, ride18 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride18 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(18) div:after {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
@-webkit-keyframes ride18 {
  to {
    offset-distance: calc((100% + 1.875px) + -41.25px);
  }
}
@keyframes ride18 {
  to {
    offset-distance: calc((100% + 1.875px) + -41.25px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(19) {
  -webkit-animation: coast 10s linear 1 forwards, ride19 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride19 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(19) div:after {
  -webkit-animation-delay: 2.05s;
          animation-delay: 2.05s;
}
@-webkit-keyframes ride19 {
  to {
    offset-distance: calc((100% + 1.875px) + -39.375px);
  }
}
@keyframes ride19 {
  to {
    offset-distance: calc((100% + 1.875px) + -39.375px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(20) {
  -webkit-animation: coast 10s linear 1 forwards, ride20 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride20 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(20) div:after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
@-webkit-keyframes ride20 {
  to {
    offset-distance: calc((100% + 1.875px) + -37.5px);
  }
}
@keyframes ride20 {
  to {
    offset-distance: calc((100% + 1.875px) + -37.5px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(21) {
  -webkit-animation: coast 10s linear 1 forwards, ride21 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride21 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(21) div:after {
  -webkit-animation-delay: 1.95s;
          animation-delay: 1.95s;
}
@-webkit-keyframes ride21 {
  to {
    offset-distance: calc((100% + 1.875px) + -35.625px);
  }
}
@keyframes ride21 {
  to {
    offset-distance: calc((100% + 1.875px) + -35.625px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(22) {
  -webkit-animation: coast 10s linear 1 forwards, ride22 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride22 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(22) div:after {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}
@-webkit-keyframes ride22 {
  to {
    offset-distance: calc((100% + 1.875px) + -33.75px);
  }
}
@keyframes ride22 {
  to {
    offset-distance: calc((100% + 1.875px) + -33.75px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(23) {
  -webkit-animation: coast 10s linear 1 forwards, ride23 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride23 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(23) div:after {
  -webkit-animation-delay: 1.85s;
          animation-delay: 1.85s;
}
@-webkit-keyframes ride23 {
  to {
    offset-distance: calc((100% + 1.875px) + -31.875px);
  }
}
@keyframes ride23 {
  to {
    offset-distance: calc((100% + 1.875px) + -31.875px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(24) {
  -webkit-animation: coast 10s linear 1 forwards, ride24 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride24 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(24) div:after {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
@-webkit-keyframes ride24 {
  to {
    offset-distance: calc((100% + 1.875px) + -30px);
  }
}
@keyframes ride24 {
  to {
    offset-distance: calc((100% + 1.875px) + -30px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(25) {
  -webkit-animation: coast 10s linear 1 forwards, ride25 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride25 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(25) div:after {
  -webkit-animation-delay: 1.75s;
          animation-delay: 1.75s;
}
@-webkit-keyframes ride25 {
  to {
    offset-distance: calc((100% + 1.875px) + -28.125px);
  }
}
@keyframes ride25 {
  to {
    offset-distance: calc((100% + 1.875px) + -28.125px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(26) {
  -webkit-animation: coast 10s linear 1 forwards, ride26 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride26 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(26) div:after {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
@-webkit-keyframes ride26 {
  to {
    offset-distance: calc((100% + 1.875px) + -26.25px);
  }
}
@keyframes ride26 {
  to {
    offset-distance: calc((100% + 1.875px) + -26.25px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(27) {
  -webkit-animation: coast 10s linear 1 forwards, ride27 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride27 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(27) div:after {
  -webkit-animation-delay: 1.65s;
          animation-delay: 1.65s;
}
@-webkit-keyframes ride27 {
  to {
    offset-distance: calc((100% + 1.875px) + -24.375px);
  }
}
@keyframes ride27 {
  to {
    offset-distance: calc((100% + 1.875px) + -24.375px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(28) {
  -webkit-animation: coast 10s linear 1 forwards, ride28 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride28 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(28) div:after {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
@-webkit-keyframes ride28 {
  to {
    offset-distance: calc((100% + 1.875px) + -22.5px);
  }
}
@keyframes ride28 {
  to {
    offset-distance: calc((100% + 1.875px) + -22.5px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(29) {
  -webkit-animation: coast 10s linear 1 forwards, ride29 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride29 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(29) div:after {
  -webkit-animation-delay: 1.55s;
          animation-delay: 1.55s;
}
@-webkit-keyframes ride29 {
  to {
    offset-distance: calc((100% + 1.875px) + -20.625px);
  }
}
@keyframes ride29 {
  to {
    offset-distance: calc((100% + 1.875px) + -20.625px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(30) {
  -webkit-animation: coast 10s linear 1 forwards, ride30 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride30 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(30) div:after {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
@-webkit-keyframes ride30 {
  to {
    offset-distance: calc((100% + 1.875px) + -18.75px);
  }
}
@keyframes ride30 {
  to {
    offset-distance: calc((100% + 1.875px) + -18.75px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(31) {
  -webkit-animation: coast 10s linear 1 forwards, ride31 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride31 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(31) div:after {
  -webkit-animation-delay: 1.45s;
          animation-delay: 1.45s;
}
@-webkit-keyframes ride31 {
  to {
    offset-distance: calc((100% + 1.875px) + -16.875px);
  }
}
@keyframes ride31 {
  to {
    offset-distance: calc((100% + 1.875px) + -16.875px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(32) {
  -webkit-animation: coast 10s linear 1 forwards, ride32 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride32 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(32) div:after {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
@-webkit-keyframes ride32 {
  to {
    offset-distance: calc((100% + 1.875px) + -15px);
  }
}
@keyframes ride32 {
  to {
    offset-distance: calc((100% + 1.875px) + -15px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(33) {
  -webkit-animation: coast 10s linear 1 forwards, ride33 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride33 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(33) div:after {
  -webkit-animation-delay: 1.35s;
          animation-delay: 1.35s;
}
@-webkit-keyframes ride33 {
  to {
    offset-distance: calc((100% + 1.875px) + -13.125px);
  }
}
@keyframes ride33 {
  to {
    offset-distance: calc((100% + 1.875px) + -13.125px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(34) {
  -webkit-animation: coast 10s linear 1 forwards, ride34 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride34 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(34) div:after {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
@-webkit-keyframes ride34 {
  to {
    offset-distance: calc((100% + 1.875px) + -11.25px);
  }
}
@keyframes ride34 {
  to {
    offset-distance: calc((100% + 1.875px) + -11.25px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(35) {
  -webkit-animation: coast 10s linear 1 forwards, ride35 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride35 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(35) div:after {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
@-webkit-keyframes ride35 {
  to {
    offset-distance: calc((100% + 1.875px) + -9.375px);
  }
}
@keyframes ride35 {
  to {
    offset-distance: calc((100% + 1.875px) + -9.375px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(36) {
  -webkit-animation: coast 10s linear 1 forwards, ride36 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride36 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(36) div:after {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
@-webkit-keyframes ride36 {
  to {
    offset-distance: calc((100% + 1.875px) + -7.5px);
  }
}
@keyframes ride36 {
  to {
    offset-distance: calc((100% + 1.875px) + -7.5px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(37) {
  -webkit-animation: coast 10s linear 1 forwards, ride37 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride37 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(37) div:after {
  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
}
@-webkit-keyframes ride37 {
  to {
    offset-distance: calc((100% + 1.875px) + -5.625px);
  }
}
@keyframes ride37 {
  to {
    offset-distance: calc((100% + 1.875px) + -5.625px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(38) {
  -webkit-animation: coast 10s linear 1 forwards, ride38 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride38 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(38) div:after {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
@-webkit-keyframes ride38 {
  to {
    offset-distance: calc((100% + 1.875px) + -3.75px);
  }
}
@keyframes ride38 {
  to {
    offset-distance: calc((100% + 1.875px) + -3.75px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(39) {
  -webkit-animation: coast 10s linear 1 forwards, ride39 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride39 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(39) div:after {
  -webkit-animation-delay: 1.05s;
          animation-delay: 1.05s;
}
@-webkit-keyframes ride39 {
  to {
    offset-distance: calc((100% + 1.875px) + -1.875px);
  }
}
@keyframes ride39 {
  to {
    offset-distance: calc((100% + 1.875px) + -1.875px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted .wrap svg foreignObject .char:nth-of-type(40) {
  -webkit-animation: coast 10s linear 1 forwards, ride40 10s ease-in-out 1 forwards;
          animation: coast 10s linear 1 forwards, ride40 10s ease-in-out 1 forwards;
  -webkit-animation-delay: 3s, 3s, 12.5s;
          animation-delay: 3s, 3s, 12.5s;
}
body.submitted .wrap svg foreignObject .char:nth-of-type(40) div:after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@-webkit-keyframes ride40 {
  to {
    offset-distance: calc((100% + 1.875px) + 0px);
  }
}
@keyframes ride40 {
  to {
    offset-distance: calc((100% + 1.875px) + 0px);
  }
}
@keyframes coast {
  41.99% {
    transform: rotate(0deg) rotateY(0deg);
  }
  42% {
    transform: rotate(180deg) rotateY(-180deg);
  }
  100% {
    transform: rotate(180deg) rotateY(-180deg);
  }
}
body.submitted svg #coaster-track, body.submitted svg #coaster-track2 {
  stroke-dashoffset: 0px;
}
body svg {
  position: absolute;
  width: 5000px;
  height: auto;
  top: calc(50% - 935px);
  left: -355.5px;
}
body svg path {
  fill: transparent;
  stroke: transparent;
}
body svg #coaster-track, body svg #coaster-track2 {
  fill: transparent;
  stroke: #222;
  stroke-dasharray: 2200px;
  stroke-dashoffset: 2200px;
  transition: 1s ease-in-out;
  stroke-width: 2.25px;
  stroke-linecap: square;
}
body svg #coaster-track2 {
  stroke: url(#pattern);
  stroke-width: 2px;
}
body svg #coaster-track3 {
  stroke: url(#Gradient2);
  stroke-width: 2.5px;
}
</style>
</head>
<body>
  <form class='signup'>
    <input class='email' placeholder='email' type='email' maxlength="20">
    <input type='submit' value='Subscribe'>
  </form>
<div class="wrap">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 570.9 139.6">
  
  <defs>
    <filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" 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>
    <linearGradient id="Gradient1" gradientTransform="rotate(90)">
      <stop offset="0%"  stop-color="rgba(166,166,164,0.0001)" />
      <stop offset="5%"  stop-color="rgba(166,166,164,0.0001)" />
      <stop offset="30%" stop-color="rgba(166,166,164,1)" />
      <stop offset="95%" stop-color="rgba(166,166,164,1)" />
      <stop offset="100%" stop-color="rgba(119,119,119,0.5)" />
    </linearGradient>
    <linearGradient id="Gradient2" gradientTransform="rotate(0)">
      <stop offset="0%"  stop-color="rgba(255,255,255,1)" />
      <stop offset="0.5%"  stop-color="rgba(255,255,255,1)" />
      <stop offset="0.5%" stop-color="rgba(255,255,255,0.00001)" />
      <stop offset="95%" stop-color="rgba(255,255,255,0.00001)" />
      <stop offset="100%" stop-color="rgba(255,255,255,0.00001)" />
    </linearGradient>
    <linearGradient id="Gradient3" gradientTransform="rotate(0)">
      <stop offset="0%"  stop-color="rgba(173,216,230,1)" />
      <stop offset="4.5%"  stop-color="rgba(173,216,230,1)" />
      <stop offset="4.5%" stop-color="rgba(173,216,230,0.00001)" />
      <stop offset="95%" stop-color="rgba(173,216,230,0.00001)" />
      <stop offset="100%" stop-color="rgba(173,216,230,0.00001)" />
    </linearGradient>
    <linearGradient id="Gradient4" gradientTransform="rotate(90)">
      <stop offset="0%"  stop-color="#fff" />
      <stop offset="2.5%"  stop-color="#fff" />
      <stop offset="5%" stop-color="#222" />
      <stop offset="95%" stop-color="#222" />
      <stop offset="100%" stop-color="#222" />
    </linearGradient>
    <pattern id="pattern"
           width="1" height="10"
           patternUnits="userSpaceOnUse"
           patternTransform="rotate(-45 50 50)">
    <line stroke="#fff" stroke-width="10px" y2="10"/>
    <line stroke="#222" stroke-width="0.5px" y2="10"/>
    
  </pattern>

    
  </defs>

  
  <g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M10.7,123h1.9a2,2,0,0,1,2,2v9.7a2,2,0,0,1-2,2H10.7a2,2,0,0,1-2-2V125A1.94,1.94,0,0,1,10.7,123Z" transform="translate(0 0)"/><path class="cls-1" d="M62.7,123h1.9a2,2,0,0,1,2,2v9.7a2,2,0,0,1-2,2H62.7a2,2,0,0,1-2-2V125A1.94,1.94,0,0,1,62.7,123Z" transform="translate(0 0)"/><path id="track-wide" class="cls-1" d="M497.4,123.6c-25.9,0-39.5-6.7-55.4-14.5-4.7-2.3-9.5-4.7-15-7-21.3,11.4-40,16.8-58.8,16.8-31.4,0-165.6.5-242.9.8H106.1l-25.1.1H72.7c-10.9.1-20.2.1-25.8.1a3.5,3.5,0,0,1,0-7l34.1-.1,25.1-.1h.1l18.7-.1c7.4-1.1,18.1-21.1,27.6-38.8,14.9-27.7,31.8-59.1,52.7-59.8,20.6-.6,28,22.6,34.5,43,5.2,16.4,10.2,32,20.2,32,14.6-.1,24.7-12.1,32.9-21.7,6.4-7.6,11.5-13.6,17.8-13.6,7.5,0,17,10,28,21.5,7.9,8.2,17.6,18.5,22.2,19a67.92,67.92,0,0,0,7.8.4A93.54,93.54,0,0,0,396.8,90c-25.5-11.1-48-26.7-41.6-54.4,4.5-19.4,23-32,47.1-32,11.7,0,23,3.1,31.9,8.8,15.6,10,24.1,22.4,24.1,34.7-.1,12-8,23-23.5,32.7A162.12,162.12,0,0,1,416,90l2.5.9c2.7,1,5.4,2.1,8.2,3.2,8.4-4.7,16.3-9.8,24-14.7,19-12.3,35.5-22.8,51.8-22.8a34.54,34.54,0,0,1,12.4,2.3c20.4,7.9,32.4,23.7,30,39.3-2.3,14.4-16.2,23.8-37.2,25C504,123.5,500.6,123.6,497.4,123.6ZM434.6,97.8c3.7,1.7,7.1,3.4,10.5,5,15.7,7.7,28.1,13.8,52.3,13.8,3.1,0,6.4-.1,9.8-.3,17.5-1,29-8.2,30.7-19.1,1.9-12.1-8.6-25.1-25.6-31.7a28,28,0,0,0-9.9-1.8c-14.2,0-29.9,10.1-48,21.7C448,89.5,441.5,93.7,434.6,97.8ZM206,21h-.6c-16.9.5-33.4,31.4-46.7,56.2-8,15-15,27.9-21.9,35.4,78.5-.3,201.5-.8,231.4-.8,16.1,0,32.2-4.2,50.3-13.3l-2.5-.9c-3.5-1.3-6.6-2.5-9.5-3.6-13.1,4.9-25.9,7.4-37.9,7.4a79.35,79.35,0,0,1-8.5-.4c-7.1-.8-16.1-10.2-26.5-21.1-7.8-8.2-18.4-19.3-23-19.3-3.1,0-7.8,5.7-12.4,11.1-8.6,10.2-20.4,24.2-38.1,24.2h0c-15.2,0-20.9-17.9-26.9-36.8C227.1,40.4,220.9,21,206,21ZM402.2,10.6c-15.7,0-35.7,7-40.2,26.6-5.8,25.1,17.8,38.6,44.6,49.3A156.34,156.34,0,0,0,431,73.9c13.3-8.3,20.1-17.4,20.2-26.8.1-9.9-7.3-20.1-20.9-28.8C422.6,13.4,412.6,10.6,402.2,10.6Z" transform="translate(0 0)"/><path id="track-narrow" class="cls-1" d="M500.4,114.3c-26.1,0-39.2-6.4-55.9-14.6-5.5-2.7-11.2-5.5-17.8-8.3-22.2,12.5-40.3,18.1-58.6,18.1H368c-32.4,0-169.3.5-248.1.8H100.1l-25.1.1H66.3c-11.2.1-20.6.1-26.3.1h0a1,1,0,0,1,0-2l35.1-.1c8,0,16.6-.1,25.1-.1h.1l19.6-.1c8.8-1.1,19.2-20.5,30.2-41.1,14.9-27.8,31.8-59.3,51.7-60h.7c18.6,0,27.5,19.1,34.1,39.9,5.6,17.7,8.9,36.8,21,36.8h0c16.1-.1,26.2-12.8,34.3-23C297.5,53.7,302,48,307.3,48c6.6,0,17,11.2,26.5,22.1,8.4,9.7,15.6,18.7,21.2,19.3q3,.3,6,.3c5.9,0,21.4-.8,41.5-7.4-8.4-3-22.9-8.7-30.2-10.8-4.9-1.4-3.1,1.3-6.9-1.4-2.9-2-5.8-7-7.7-9.9C353.6,54,351.8,42.4,354,33c5.2-22.7,30.3-33,51.5-33,11.2,0,22.7,2.5,30.5,7.6,15.8,10.1,23.1,20.4,23,31.1,0,24.6-7.4,20.7-21.7,29.6a169.74,169.74,0,0,1-28.7,14.1l.4.2c3.2,1.1,6.4,2.3,9.6,3.5,2.7,1,5.3,2,8,3.2,7.9-4.5,15.5-9.4,22.9-14.1,19.4-12.4,37.8-24.2,55-24.2A35.4,35.4,0,0,1,517,53.2c21.9,8.1,28.2,22,28.1,37.6-.1,8.6-.5,9.2-1.8,11.6-1.8,3.5-5.3,1.7-9.2,4.5-5.5,3.9-13.3,6.8-23.8,7.3C506.9,114.2,503.6,114.3,500.4,114.3ZM429,90.1c6.1,2.6,11.4,5.2,16.5,7.7,16.4,8.1,29.4,14.4,55,14.4,3.1,0,6.4-.1,9.8-.3,13-.7,23.1-5.3,28.5-12.5,2.2-2.9,3.9-5.5,4.2-9.3,1-13.4-5.8-27.4-26.7-35.2a33.73,33.73,0,0,0-11.8-2.1c-16.6,0-34.7,11.6-53.9,23.8C443.7,81.2,436.5,85.8,429,90.1ZM202.4,9.2h-.6c-18.7.6-35.3,31.5-49.9,58.9-9.8,18.3-18.5,34.5-26.8,40.1,79.5-.3,211.3-.8,243-.8h.1c17.5,0,34.9-5.3,56.2-17-2.2-.9-4.3-1.7-6.5-2.5-3.2-1.2-6.4-2.3-9.6-3.5l-2.7-1c-21.5,7.6-38.3,8.4-44.5,8.4-2.1,0-4.1-.1-6.2-.3-6.4-.7-13.5-10-22.5-20.5-8.8-10-19.3-20.9-25-20.9-4.3,0-8.8,5.6-14,12.2C285,72.8,274.5,85.9,257.5,86h0c-13.7,0-16.5-17.8-22.3-36.3C228.8,29.6,219.5,9.2,202.4,9.2ZM405.5,2.1C385.1,2,361,11.9,356,33.5c-5.9,25.5,16.8,35.9,49.6,47.8a162.59,162.59,0,0,0,30.6-14.7C449.9,58,456.9,49,457,39.6c.1-10-5.8-20-21-29.7-7.6-4.8-19.7-7.9-30.5-7.8Z" transform="translate(0 0)"/><rect class="cls-1" x="210.8" y="16.6" width="2.1" height="118.9"/><rect class="cls-1" x="227.8" y="34.9" width="2.1" height="100.6"/><rect class="cls-1" x="244.8" y="84.3" width="2.1" height="51.1"/><rect class="cls-1" x="261.8" y="90.4" width="2.1" height="45.1"/><rect class="cls-1" x="278.8" y="85.2" width="2.1" height="50.3"/><rect class="cls-1" x="295.8" y="70.2" width="2.1" height="65.3"/><rect class="cls-1" x="312.8" y="58.7" width="2.1" height="76.8"/><rect class="cls-1" x="329.8" y="70.2" width="2.1" height="65.3"/><rect class="cls-1" x="346.8" y="86.2" width="2.1" height="49.3" transform="translate(-0.33 1.03) rotate(-0.17)"/><rect class="cls-1" x="363.8" y="24.1" width="2.1" height="111.3"/><rect class="cls-1" x="380.8" y="12.4" width="2.1" height="123.1"/><rect class="cls-1" x="397.8" y="7.6" width="2.1" height="127.9"/><rect class="cls-1" x="414.8" y="7.6" width="2.1" height="127.9"/><rect class="cls-1" x="431.8" y="16.6" width="2.1" height="118.9"/><rect class="cls-1" x="448.8" y="30" width="2.1" height="105.4"/><rect class="cls-1" x="465.8" y="73.2" width="2.1" height="62.3"/><rect class="cls-1" x="482.8" y="62.5" width="2.1" height="73"/><rect class="cls-1" x="499.8" y="62.5" width="2.1" height="73"/><rect class="cls-1" x="516.8" y="62.5" width="2.1" height="73"/><rect class="cls-1" x="533.8" y="78.7" width="2.1" height="56.8"/><rect class="cls-1" x="195.1" y="20.9" width="2.1" height="115.6"/><rect class="cls-1" x="179.6" y="34.9" width="2.1" height="102.3"/><rect class="cls-1" x="163.6" y="59.7" width="2.1" height="78.4"/><rect class="cls-1" x="147.6" y="88.4" width="2.1" height="50.5"/><rect class="cls-1" x="131.6" y="116" width="2.1" height="23.4"/><rect class="cls-1" x="115.6" y="116.2" width="2.1" height="23.4"/><rect class="cls-1" x="99.6" y="115.9" width="2.1" height="23.4"/><rect class="cls-1" x="83.6" y="116.1" width="2.1" height="23.4"/></g></g><path id="coaster-track" class="cls-2" d="M43.4,116c20.25.2,40.42-.26,60.07,0,20.48.27,40.95-.19,61.43,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.35,148.35,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.93-22.55,3.21c-11.4.7-22.83-.15-34.25-.21-5.63,0-22.16.24-27.78,0" transform="translate(0 0)"/>
  <path id="coaster-track2" class="cls-2" d="M43.4,116c20.25.2,40.42-.26,60.07,0,20.48.27,40.95-.19,61.43,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.35,148.35,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.93-22.55,3.21c-11.4.7-22.83-.15-34.25-.21-5.63,0-22.16.24-27.78,0" transform="translate(0 0)"/>
  <path id="coaster-track3" class="cls-2" d="M43.4,116c20.25.2,40.42-.26,60.07,0,20.48.27,40.95-.19,61.43,0,40.58.38,81.17.21,121.75,0,22.55-.12,45.47,1.41,68.08.88,4.11-.1,8.21-.26,12.29-.52A148.35,148.35,0,0,0,438.18,93c13.35-8.66,25.37-19.54,39.81-26.23,8.25-3.82,17.42-6.22,26.43-5.07,10.12,1.3,19.27,7,26.53,14.13,5,5,9.49,11.19,9.62,18.25.17,10-8.39,18.08-17.47,22.23-14.61,6.66-31.59,6.49-47.18,2.69-18.19-4.44-34.59-13.76-51.73-20.86-16.53-6.84-33.86-12.72-48.43-23.38C363.57,65.83,354.13,51,356.93,36.17c2.05-10.81,10.41-19.76,20.45-24.25S398.9,7,409.74,8.82c22.89,3.84,56.48,24.63,39.51,52-6.77,10.92-18.63,16.81-29.8,22.91-12.18,6.67-25.67,10.64-39.29,13.34-6,1.19-12.27,2.15-18.3.92-9.54-2-17.17-9.06-23.37-16.57-6.53-7.93-14.41-23.35-26.18-23.34-4.87,0-9.39,3.28-12.56,6.78-12.38,13.66-30.26,40.06-50.9,22.51-9.2-7.82-9.52-21.58-12.79-32.43-3.57-11.78-8.62-23.58-17.25-32.57-11.16-11.62-23-5.12-32.26,5C165.63,50.11,157.2,75.19,141.7,102c-2.39,4.14-5.88,8.48-9.91,11s-17.87,2.93-22.55,3.21c-11.4.7-22.83-.15-34.25-.21-5.63,0-22.16.24-27.78,0" transform="translate(-1.25 0)"/>
  <foreignobject class="node" x="0" y="0" width="5000" height="1222.63">

      </foreignobject>
  </svg>
</div>

<div class="abyss"></div>
<div class="abyss"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/splitting.min.js'></script>
      <script>
Splitting();

$('.signup').submit(function (event) {
  event.preventDefault();
  var emailText = $('.email').val();
  $("svg foreignObject").append('<div data-splitting="chars">' + emailText + "</div>");
  Splitting();
  $("span.char:first-of-type").unwrap();
  var t = 40 - $(".char").length;
  console.log(t);
  for (let j = 0; j < t; j++) {if (window.CP.shouldStopExecution(0)) break;
    $("svg foreignObject div").append('<span class="char empty"></span>');
  }window.CP.exitedLoop(0);
  $(".char").append('<div></div>');
  $("body").addClass("submitted");
  setTimeout(function () {
    $('foreignObject span').remove();
    $('.email').val('');
    $("body").removeClass("submitted");
  }, 16000);
});
    </script>
</body>
</html>
 

3. By Thomas Cullen

Made by Thomas Cullen. Subscribe form with Loading and Success Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
body, html {
  height: 100%;
  font-family: "Open Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5F3F9;
}

.Container {
  width: 360px;
}

.Subscribe {
  height: 250px;
  padding: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 6px 10px 0 rgba(149, 144, 179, 0.15), 0 15px 50px 0 rgba(182, 182, 224, 0.1);
}

.Subscribe::after {
  width: 150%;
  height: 130px;
  content: "";
  z-index: 1;
  position: absolute;
  bottom: -20px;
  left: -25%;
  transform: rotate(-5deg);
  background-color: #F9F9FC;
  transition: transform 1s cubic-bezier(0.2, 0, 0, 1);
}

.Subscribe h3 {
  color: #4F20FF;
  font-size: 22px;
  margin-bottom: 15px;
  transition: opacity 900ms 150ms cubic-bezier(0.2, 0, 0, 1), transform 900ms 150ms cubic-bezier(0.2, 0, 0, 1);
}

.Subscribe p {
  color: #827C8C;
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 30px;
  transition: opacity 900ms 100ms cubic-bezier(0.2, 0, 0, 1), transform 900ms 100ms cubic-bezier(0.2, 0, 0, 1);
}

.Subscribe form {
  z-index: 2;
  left: 20px;
  width: 320px;
  height: 46px;
  bottom: 25px;
  overflow: hidden;
  position: absolute;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 3px 6px 0 rgba(149, 144, 179, 0.2);
  transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
}

.Subscribe form::after {
  top: 0;
  content: "";
  width: 30px;
  height: 100%;
  right: 110px;
  position: absolute;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);
}

.Subscribe form input[type=text] {
  border: none;
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 15px;
  padding: 0 110px 0 20px;
  font-family: "Open Sans", sans-serif;
}

.Subscribe form button {
  top: 0;
  right: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  width: 110px;
  border: none;
  height: 100%;
  color: #5224FF;
  font-size: 15px;
  position: absolute;
  background-color: white;
  transition: color 500ms;
}
.Subscribe form button:hover {
  color: #1A0373;
}

.Loading {
  left: 0;
  opacity: 0;
  z-index: 0;
  width: 100%;
  bottom: 50px;
  position: absolute;
  text-align: center;
  potiner-events: none;
  transition: opacity 900ms 0s cubic-bezier(0.2, 0, 0, 1), transform 900ms 0s cubic-bezier(0.2, 0, 0, 1);
}
.Loading .LoadingDot {
  width: 6px;
  opacity: 0;
  height: 6px;
  margin: 0 1px;
  border-radius: 50%;
  display: inline-block;
  background-color: #B6B6CF;
}
.Loading .LoadingDot:nth-child(1) {
  animation: loading 2s 0ms infinite;
}
.Loading .LoadingDot:nth-child(2) {
  animation: loading 2s 200ms infinite;
}
.Loading .LoadingDot:nth-child(3) {
  animation: loading 2s 400ms infinite;
}
.Loading .LoadingDot:nth-child(4) {
  animation: loading 2s 600ms infinite;
}
.Loading span {
  color: #B6B6CF;
  display: block;
  font-size: 12px;
  margin-top: 15px;
}

@keyframes loading {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  33% {
    opacity: 1;
    transform: scale(1);
  }
  66% {
    opacity: 0;
    transform: scale(0.5);
  }
}
.Complete {
  left: 0;
  top: 50px;
  width: 100%;
  padding: 0 30px;
  text-align: center;
  position: absolute;
}
.Complete .Tick {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 30px;
  display: inline-block;
  background-color: #4F20FF;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 600ms 200ms, transform 600ms 200ms;
}
.Complete .Tick svg {
  opacity: 0;
  margin-top: 28px;
  transform: scale(0.5);
  transition: opacity, 400ms 500ms, transform 300ms 500ms cubic-bezier(0.2, 0, 0, 1.2);
}
.Complete h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 600ms 450ms, transform 600ms 450ms;
}
.Complete span {
  opacity: 0;
  color: #827C8C;
  display: block;
  font-size: 14px;
  transform: translateY(-15px);
  transition: opacity 600ms 400ms, transform 600ms 400ms;
}

.Subscribe--loading form,
.Subscribe--complete form {
  transform: translateY(100px);
}
.Subscribe--loading::after,
.Subscribe--complete::after {
  transform: rotate(0) translateY(100px);
}
.Subscribe--loading .Loading,
.Subscribe--complete .Loading {
  opacity: 1;
  pointer-events: all;
}

.Subscribe--complete .Loading {
  opacity: 0;
  transform: translateY(100px);
}
.Subscribe--complete h3 {
  transform: translateY(100px);
  opacity: 0;
}
.Subscribe--complete p {
  transform: translateY(100px);
  opacity: 0;
}
.Subscribe--complete .Complete .Tick {
  opacity: 1;
  transform: scale(1);
}
.Subscribe--complete .Complete .Tick svg {
  opacity: 1;
  transform: scale(1);
}
.Subscribe--complete .Complete h4,
.Subscribe--complete .Complete span {
  opacity: 1;
  transform: translateY(0);
}

.Container small {
  width: 100%;
  display: block;
  color: #B6B6CF;
  font-size: 14px;
  padding: 0 30px;
  line-height: 22px;
  text-align: center;
}
</style>
</head>
<body>
  <div class="Container">
  <div class="Subscribe">
    <h3>Subscribe to our newsletter</h3>
    <p>Weekly animation tutorials delivered straight to your inbox</p>
    <form action="#">
      <input type="text" placeholder="Email Address" />
      <button>Subscribe</button>
    </form>
    <div class="Loading">
      <div class="LoadingDot"></div>
      <div class="LoadingDot"></div>
      <div class="LoadingDot"></div>
      <div class="LoadingDot"></div>
      <span>Subscribing</span>
    </div>
    <div class="Complete">
      <div class="Tick">

        <svg width="32px" height="25px" viewBox="0 0 32 25">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-384.000000, -217.000000)" fill-rule="nonzero" fill="#FFFFFF">
            <g id="Group" transform="translate(360.000000, 189.000000)">
                <path d="M27.4142136,40.5857864 C26.633165,39.8047379 25.366835,39.8047379 24.5857864,40.5857864 C23.8047379,41.366835 23.8047379,42.633165 24.5857864,43.4142136 L34,52.8284271 L55.4142136,31.4142136 C56.1952621,30.633165 56.1952621,29.366835 55.4142136,28.5857864 C54.633165,27.8047379 53.366835,27.8047379 52.5857864,28.5857864 L34,47.1715729 L27.4142136,40.5857864 Z" id="Path-2"></path>
            </g>
        </g>
    </g>
</svg>
      </div>
      <h4>Thank you for subscribing</h4>
      <span>You will receive a confirmation email shortly</span>
    </div>
  </div>
  <small>This form is an animation demo and will not store any provided data.</small>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
      <script>
const s = document.querySelector('.Subscribe');
const b = document.querySelector('button');
b.addEventListener('click', e => {
  e.preventDefault();
  s.classList.toggle('Subscribe--loading');
  setTimeout(() => {
    s.classList.remove('Subscribe--loading');
    s.classList.toggle('Subscribe--complete');
  }, 2000);

  setTimeout(() => {
    s.classList.remove('Subscribe--complete');
  }, 5000);
});

class Subscribe extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, "Subscribe"));

  }}
    </script>
</body>
</html>

4. By Aude

Made by Aude. JavaScript Subscribe form with Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

body {
	background:#11BCAF;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #171D23;
	margin: 00;
}

.container {	
	width: 300px;
	height: 300px;
	margin: auto;
}

.login_bar {
	width: 300px;
	height: 50px;
	background: white;
	border-radius: 10px;
	top: 50%;
	position: relative;
  z-index: 1;
	overflow: hidden;
}

.login {
	background: transparent;
	position: absolute;
	height: 100%;
	width: 190px;
	padding-left: 10px;
	text-align: left;
	line-height: 50px;
	vertical-align: middle;
	z-index: 10;
	-webkit-transition: transform 0.2s ease-in-out 0s;
	   -moz-transition: transform 0.2s ease-in-out 0s;
	     -o-transition: transform 0.2s ease-in-out 0s;
	        transition: transform 0.2s ease-in-out 0s;
}

.login_active {
	-webkit-transform: translateX(300px);
	   -moz-transform: translateX(300px);
	    -ms-transform: translateX(300px);
	     -o-transform: translateX(300px);
	        transform: translateX(300px);
}

.subscribe_button:hover{
	background-color: #222A33;
	cursor:pointer;
}

.subscribe_button {
	background: #171D23;
	position: absolute;
	top: -50px;
	left: 200px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	height: 150px;
	width: 100px;
	text-align: center;
	line-height: 150px;
	vertical-align: middle;	
	color: white;
	-webkit-transition: transform 0.5s ease 0s;
	   -moz-transition: transform 0.5s ease 0s;
	     -o-transition: transform 0.5s ease 0s;
	        transition: transform 0.5s ease 0s;
}

.subscribe_button_active{
	-webkit-transform: translateY(50px);
	   -moz-transform: translateY(50px);
	    -ms-transform: translateY(50px);
	     -o-transform: translateY(50px);
	        transform: translateY(50px);
}

.subscribing{
	background: #CDD4DC;
	height: 100%;
	width: 300px;
	z-index: 5;
	position: absolute;
	left:-300px;
	display: inline-block;
	-webkit-transition: transform 1s ease 0s ;
	   -moz-transition: transform 1s ease 0s ;
	     -o-transition: transform 1s ease 0s ;
	        transition: transform 1s ease 0s ;
}

.subscribing_active {
	-webkit-transform: translateX(300px);
	   -moz-transform: translateX(300px);
	    -ms-transform: translateX(300px);
	     -o-transform: translateX(300px);
	        transform: translateX(300px);
}

.thanks{
	background: transparent;
	height: 100%;
	width: 300px;
	z-index: 5;
	text-align: left;
	line-height: 50px;
	vertical-align: middle;
	padding-left: 10px;
	position: absolute;
	top:50px;
	display: inline-block;
	-webkit-transition: transform 0.5s ease 0s ;
	   -moz-transition: transform 0.5s ease 0s ;
	     -o-transition: transform 0.5s ease 0s ;
	        transition: transform 0.5s ease 0s ;
}

.thanks_active {
	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
}
</style>
</head>
<body>
  <div class="container">
  <div class="login_bar">
    <span class="login"><a href="#"</a>[email protected]</span>
    <span class="subscribe_button" onclick="subscribeOnClick()">subscribe</span>
    <span class="subscribing"></span>
    <span class="thanks"> Thank you. You have been subscribed</span>
  </div>
</div>
      <script>
var subscribe_button = document.querySelector(".subscribe_button");

subscribe_button.addEventListener('click', function () {
  var subscribing = document.querySelector(".subscribing");
  var thanks = document.querySelector(".thanks");
  var login = document.querySelector(".login");

  subscribing.classList.add("subscribing_active");
  subscribe_button.classList.add("subscribe_button_active");
  setTimeout(function () {
    login.classList.add("login_active");
  }, 1200);
  setTimeout(function () {
    thanks.classList.add("thanks_active");
  }, 1400);

  setTimeout(function () {
    thanks.classList.remove("thanks_active");
    login.classList.remove("login_active");
    subscribing.classList.remove("subscribing_active");
    subscribe_button.classList.remove("subscribe_button_active");
  }, 4000);
});
    </script>
</body>
</html>

5. By Denis

Made by Denis. Popup Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700,900" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.popup-overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 186, 0, 0.7);
  z-index: 100;
}
.popWindow{
  display: none;
  background-color: #161613;
  color: #fff;
  width: 90%;
  max-width: 720px;
  padding: 40px 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -360px;
  margin-top: -185px;
  text-align: center;
  box-shadow: 0 0 30px rgba(18, 17, 12, 0.5);
}
@media only screen and (max-width : 800px) {
  .popWindow {
    margin-left: -45%;
  }
}
.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 40px;
  line-height: 20px;
  cursor: pointer;
  color: #999;
  padding: 10px;
}
.subscribe_window .subcsribe-text {
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 40px;
  position: relative;
  padding: 0 50px;
  z-index: 10;
}
.subscribe_window .req-fields {
  color: #676767;
  text-align: left;
}
.subscribe-form {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.subscribe-form div {
  position: relative;
}
.subscribe-form input {
  border: 1px solid #3d3d3d;
  width: 100%;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 32px;
  padding: 5px 20px;
  margin-bottom: 20px;
  outline: none;
  background: #2e2e2b;
  color: #fff;
  border-radius: 4px;
}
.btn {
  color: #161613;
  background-color: #ffba00;
  padding: 10px 50px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #ffba00;
  box-shadow: none;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.btn:hover, .btn:focus {
  background-color: #ffba00;
  color: #fff;
  text-decoration: none;
}
.subscribe-form .btn {
  font-size: 24px;
  line-height: 54px;
  border: none;
  width: 100%;
  padding: 10px;
  font-weight: 700;
  text-align: center;
  outline: none;
  border-radius: 4px;
}
.subscribe-form .btn:hover {
  background-color: #e6a700;
}
.subscribe-form .btn i {
  font-size: 28px;
  margin-right: 7px;
}
.subscribe-form label {
  color: #fff;
  position: absolute;
  top: 12px;
  left: 20px;
  -webkit-transition: 0.28s;
  transition: 0.28s;
}
.subscribe-form label span {
  color: #ffba00;
}
.subscribe-form input:focus + label {
  left: -62px;
  font-size: 12px;
}
.subscribe-form input:invalid {
  box-shadow: none;
}
.subscribe-form input:valid {
  border: 1px solid #161613;
}
.subscribe-form input:valid + label {
  left: -62px;
  font-size: 12px;
}
.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) {
  border: 1px solid #d3362a;
}
.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label {
  left: -62px;
  font-size: 12px;
}
@media only screen and (max-width : 480px) {
  .subscribe_window{
    top: 5%;
    margin-top: 0;
  }
  .subscribe_window .subcsribe-text{
    padding: 0;
  }
  .subscribe-form input:focus + label{
    left: 20px;
    top: -18px;
  }
  .subscribe-form input:valid + label{
    left: 20px;
    top: -18px;
  }
  .subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label{
    left: 20px;
    top: -18px;
  }
}
.thank_you_window .thank_you_title {
  font-family: "Titillium Web", sans-serif;
  color: #fff;
  font-size: 32px;
  line-height: 50px;
  font-weight: 700;
  margin-bottom: 10px;
}
.thank_you_window .thank_you_body {
  font-family: "Titillium Web", sans-serif;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <h1>Contact Form</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime repellat asperiores natus unde quos consequuntur aliquid temporibus doloremque nihil nulla quidem, expedita hic nobis ipsam quia fugiat. Sunt, maxime, fugit!</p>
 
      <div class="popup-overlay">
 
        <div class="popWindow subscribe_window">
          <p class="subcsribe-text">Subscribe to receive news and information</p>
          <form class="subscribe-form" autocomplete="off">
            <div>
              <input type="text" id="name-subscribe" name="Name" placeholder=" " required>
              <label for="name-subscribe">Name <span>*</span></label>
            </div>
            <div>
              <input type="email" id="email-subscribe" name="E-mail" placeholder=" " required>
              <label for="email-subscribe">Email <span>*</span></label>
            </div>
            <div class="aligncenter">
              <button type="submit" class="btn"><i class="fa fa-check" aria-hidden="true"></i> Subscribe</button>
            </div>
            <div class="req-fields"><sup>*</sup> required fields</div>
          </form>
          <div class="close-btn">&times;</div>
        </div>
 
        <div class="popWindow thank_you_window">
          <p class="thank_you_title">Thank you for subscribing!</p>
          <p class="thank_you_body">We've sent some useful tips to your email. Go ahead and check them now!</p>
          <div class="close-btn">&times;</div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src="https://maxcdn.denis-creative.com/jquery.cookie.min/jquery.cookie.min.js"></script>
      <script>
// PopUp Form and thank you popup after sending message
var $popOverlay = $(".popup-overlay");
var $popWindow = $(".popWindow");
var $subscribeWindow = $(".subscribe_window");
var $popThankYouWindow = $(".thank_you_window");
var $popClose = $(".close-btn");

$(function () {
  // Close Pop-Up after clicking on the button "Close"
  $popClose.on("click", function () {
    $popOverlay.fadeOut();
    $popWindow.fadeOut();
  });

  // Close Pop-Up after clicking on the Overlay
  $(document).on("click", function (event) {
    if ($(event.target).closest($popWindow).length) return;
    $popOverlay.fadeOut();
    $popWindow.fadeOut();
    event.stopPropagation();
  });
  $(".subscribe-form").submit(function () {
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php",
      data: th.serialize() }).
    done(function () {
      $subscribeWindow.fadeOut();
      $popThankYouWindow.fadeIn();
      setTimeout(function () {
        th.trigger("reset");
      }, 1000);
    });
    return false;
  });
});
$(window).load(function () {
  setTimeout(function () {
    $popOverlay.fadeIn();
    $subscribeWindow.fadeIn();
  }, 2000);
});
    </script>
</body>
</html>

6. By Ahmad Shadeed

Made by Ahmad Shadeed. Simple Subscribe form with Success animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  background: #2a7cd3;
  font-family: "Arial";
  text-align: center;
}

* {
  box-sizing: border-box;
}

p {
  color: #fff;
}
p a {
  color: rgba(255, 255, 255, 0.5);
}

form {
  position: relative;
  margin: 200px auto 50px auto;
  width: 550px;
  height: 80px;
}

input {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  border: 0;
  border-radius: 4px;
  background: #065cb7;
  outline: 0;
  padding: 2em 1em 1em 1em;
  color: #fff;
  font-size: 1em;
  transition: background 0.35s ease-out;
}
input::-webkit-input-placeholder {
  color: #fff;
  text-transform: capitalize;
}
input:-moz-placeholder {
  color: #fff;
  text-transform: capitalize;
}
input::-moz-placeholder {
  color: #fff;
  text-transform: capitalize;
}
input:-ms-input-placeholder {
  color: #fff;
  text-transform: capitalize;
}
input:focus {
  background: #044f9e;
}
input:focus + label {
  transform: translateY(-10px) scale(0.8);
  color: #6da6df;
}
input:focus + label + button {
  opacity: 1;
}

label {
  position: absolute;
  left: 1em;
  top: 50%;
  margin-top: -8px;
  color: #fff;
  text-transform: capitalize;
  transform-origin: left center;
  transition: transform 0.25s ease-out, color 0.25s ease-out;
}

button {
  position: absolute;
  right: 0;
  width: 120px;
  height: 100%;
  border: 0;
  border-radius: 4px;
  font-size: 1em;
  background: #065cb7;
  color: #044f9e;
  cursor: pointer;
  opacity: 0;
  outline: none;
  transition: opacity 0.35s ease-out, width 0.5s ease-out, background 0.25s ease-out;
}

button.is-active {
  background: #5c94cd;
  color: #fff;
}

button.is-done {
  width: 100%;
  opacity: 1;
}
</style>
</head>
<body>
  <form>
  <input type="email" id="email"/>
  <label for="email">email address</label>
  <button id="button">OK</button>
</form>
<p>Original <a href="https://dribbble.com/shots/2359423-Daily-UI-026-Subscribe" target="_blank">idea</a> by <a href="https://dribbble.com/dmtors" target="_blank"> Derek Torsani</a> on Dribbble</p>
      <script>
var email = document.getElementById('email'),
button = document.getElementById('button');

function validateEmail(email) {
  var ex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  return ex.test(email);
}

email.addEventListener('keydown', function () {
  var email = this.value;

  if (validateEmail(email)) {
    button.classList.add('is-active');
  }
});

button.addEventListener('click', function (e) {
  e.preventDefault();
  this.classList.add('is-done', 'is-active');

  setTimeout(function () {
    button.innerHTML = "Thanks! Check Your Email.";
  }, 500);
});
    </script>
</body>
</html>

7. By Chouaib Belagoun

Made by Chouaib Belagoun. Simple CSS Newsletter Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<style>
*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body, html{
  background:#9c27b0;
  font-family: 'Open Sans', sans-serif;
}

.container{
  width:400px;
  height:500px;
  background:#fff;
  margin:20px auto;
  border-radius:4px;
  text-align:center;
  position:relative;
  -moz-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
  -webkit-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   overflow:hidden;
}


.one , .two{
  display:block;
  height:500px;
  width:400px;
  margin:0px auto;
  position:absolute;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.one{
  top:0;
  background:#fff;
  margin-top:20px;
}

.two{
  top:500px;
  background:#ffc107;
}

.two h3{
  color:#fff;
  padding-top:240px;
}

.container .logo{
  width:40%;
  height:auto;
  display:block;
  margin:20px auto;
}

.one  .heading{
  color:#607d8b;
  text-transform:capitalize;
  font-size:20px;
  fonr-weight:900;
  margin-top:40px;
}

.container p{
  font-size:12px;
  color:#b7b7b7;
  font-weight:lighter;
  text-transform:capitalize;
}

input[type='text']{
  width:85%;
  height:60px;
  margin-top:20px;
  margin-bottom:20px;
  padding-bottom:-80px;
  border:none;
  border-bottom:3px solid #ffc107;
  overflow:auto;
  position:relative;
}

input[type='text']:active:focus,
input[type='text']:focus,
input[type='text']:hover{
  outline : none;
  font-size:20px;
}

input[type='text']:focus::-webkit-input-placeholder,
input[type='text']:active:focus::-webkit-input-placeholder
{
  font-size:12px;
  display:block;
  -webkit-transform:translateY(-20px);
  transform:translateY(-20px);
}

::-webkit-placeholder{
  font-size:14px;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; 
}

::placeholder{
  font-size:14px;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; 
}

.one  .btn{
  width:85%;
  background:#ffc107;
  padding:15px;
  border:none;
  border-radius:5px;
  font-size:14px;
  color:#fff;
  text-transform:capitalize;
  font-family: 'Open Sans', sans-serif;
}

.one  .btn:active:focus,
.one  .btn:focus,
.one  .btn:hover{
  outline : none;
}

.one .btn:hover{
  cursor:pointer;
}

.close{
  position:relative;
  top:0;
  left:0;
  display:block;
  cursor:pointer;
}

.close:before{
  content:"";
  position:absolute;
  top:-240px;
  right:50px;
  display:block;
  width:22px;
  height:3px;
  background:#fff;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.close:after{
  content:"";
  position:absolute;
  top:-240px;
  right:50px;
  display:block;
  width:22px;
  height:3px;
  background:#fff;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
</style>
</head>
<body>
  <section class="container">
 <section class="one">
  <div class="logo">
    <img src="https://image.flaticon.com/icons/svg/143/143361.svg">
  </div>
  <h2 class="heading">
    please subscribe to get updates
  </h2>
  <p> signup with your email to get latest updates 
  </p>
  <form>
    <input type='text' placeholder="enter your email"><br/>
    <button class="btn" role="button">
      subscribe
    </button>
  </form>
  </section>
  <section class="two">
    <h3>
      thank you for subscribing !
    </h3>
    <div class="close"> 
    </div>
  </section>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$(function () {
  $('.one form .btn').on('click', function () {
    $(this).parents('.one').animate({
      top: '-500px' },
    500);

    $(this).parents('.one').siblings('.two').
    animate({
      top: '0px' },
    500);
    return false;
  });

  $('.two .close').on('click', function () {
    $(this).parent().animate({
      top: '-500px' },
    500);

    $(this).parent().siblings('.one').animate({
      top: '0px' },
    500);
    return false;
  });
});
    </script>
</body>
</html>

8. By Satyajit Rout

Made by Satyajit Rout. Modified Subscribe Form with Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  font-size: 26px;
}

body {
  background-color: #fff;
}

.sign-up-container {
  width: 100%;
  padding-top: 208.33333px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
}

.paper {
  width: 85%;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  top: -145px;
  padding: 1rem 1.4rem 125px 1.4rem;
  background: #fff;
  background: -webkit-linear-gradient(top, #f1f1f1 43%, #fff 100%);
  background: linear-gradient(to bottom, #f1f1f1 43%, #eee2b4 100%);
  color: #db4344;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

h1 {
  margin-bottom: 1rem;
  margin-top: 0;
  text-align: center;
  font-size: 1em;
  font-weight: 300;
}

.text-input,
.button {
  box-sizing: border-box;
  padding: 0.8em 0.67em;
  margin-bottom: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 2em;
  outline: none;
}

.button {
  border: 1px solid #999;
  -webkit-transition: background 0.1s, color 0.1s;
  transition: background 0.1s, color 0.1s;
}
.button:hover {
  background: #db4344;
  color: #fef8e1;
}

.text-input {
  background: #fff;
    color: #333;
}
.text-input::-webkit-input-placeholder {
  color: inherit;
  font-style: italic;
}
.text-input::-moz-placeholder {
  color: inherit;
  font-style: italic;
}
.text-input:-ms-input-placeholder {
  color: inherit;
  font-style: italic;
}
.text-input::placeholder {
  color: inherit;
  font-style: italic;
}

.sign-up-form {
  width: 100%;
}
.sign-up-form * {
  width: 100%;
}

.envelope {
  position: relative;
  width: 400px;
  height: 250px;
  margin: 0 auto;
  background: #fa5b5c;
  border-radius: 24px;
}
.envelope:before {
  content: '';
  display: block;
  position: absolute;
  top: -240px;
  width: 0;
  height: 0;
  z-index: -1;
  border-width: 125px 200px;
  border-color: transparent;
  border-style: solid;
  border-bottom-color: #fa5b5c;
  border-radius: 24px;
}
.envelope:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border-width: 125px 200px;
  border-style: solid;
  border-color: #db4344;
  border-top-color: transparent;
  border-radius: 24px;
}
.envelope .bottom-flap {
  width: 400px;
  height: 250px;
  display: block;
  position: absolute;
  top: 0;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  pointer-events: none;
}
.envelope .bottom-flap:after {
  content: '';
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  top: 40%;
  border-radius: 24px;
  background: #fa5b5c;
  -webkit-transform: scaleY(0.7) rotate(45deg);
          transform: scaleY(0.7) rotate(45deg);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.thanks-text {
  position: absolute;
  width: 100%;
  top: 250px;
  z-index: -1;
  text-align: center;
  font-weight: 400;
}

.submitted .paper {
  -webkit-animation: paper-in 0.8s ease-out;
          animation: paper-in 0.8s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.submitted.sign-up-container {
  overflow: hidden;
}
.submitted .envelope {
  -webkit-animation: fly-away 0.5s ease-in;
          animation: fly-away 0.5s ease-in;
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.submitted .envelope:before {
  -webkit-animation: fold 0.5s ease-in;
          animation: fold 0.5s ease-in;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes paper-in {
  30% {
    -webkit-transform: translateY(-80px);
            transform: translateY(-80px);
    padding-bottom: 125px;
  }
  to {
    top: 10px;
    padding-bottom: 0;
  }
}

@keyframes paper-in {
  30% {
    -webkit-transform: translateY(-80px);
            transform: translateY(-80px);
    padding-bottom: 125px;
  }
  to {
    top: 10px;
    padding-bottom: 0;
  }
}
@-webkit-keyframes fly-away {
  to {
    -webkit-transform: translateX(200%) rotate(10deg);
            transform: translateX(200%) rotate(10deg);
    opacity: 0;
  }
}
@keyframes fly-away {
  to {
    -webkit-transform: translateX(200%) rotate(10deg);
            transform: translateX(200%) rotate(10deg);
    opacity: 0;
  }
}
@-webkit-keyframes fold {
  from {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    z-index: 10;
  }
  to {
    z-index: 10;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: rotateX(-180deg) translateY(10px);
            transform: rotateX(-180deg) translateY(10px);
    border-bottom-color: #5eb6e0;
  }
}
@keyframes fold {
  from {
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    z-index: 10;
  }
  to {
    z-index: 10;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: rotateX(-180deg) translateY(10px);
            transform: rotateX(-180deg) translateY(10px);
    border-bottom-color: #fa5b5c;
  }
}
.reset-button {
  display: block;
  padding: 0.6em 1em;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  background: transparent;
  border: 1px solid black;
}
.reset-button:hover {
  color: white;
  background: black;
}
</style>
</head>
<body>
  <div class="sign-up-container">
  <div class="envelope">
    <div class="paper">
      <h1>Subscribe our Newslatter</h1>
      <form class="sign-up-form">
        <input type="text" placeholder="Email" class="text-input"/>
        <button type="submit" class="button">Sign up</button>
      </form>
    </div>
    <div class="bottom-flap"></div>
  </div>
  <div class="thanks-text"> <span>Thanks for subscribing</span></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $('.sign-up-form').on('submit', submit);
  $('.reset-button').on('click', reset);
});

function submit(e) {
  $('.sign-up-container').addClass('submitted');
  e.preventDefault();
}

function reset() {
  $('.sign-up-container').removeClass('submitted');
  $('.sign-up-form')[0].reset();
}
    </script>
</body>
</html>