<p>Hello<br>New Me</p>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>

@import url('https://fonts.googleapis.com/css?family=Courgette');

/* Positioning */
body {
  padding: 50px;
  position: relative;
  background: #ffd;
}
p, div {
  position: absolute;
}

p {
  font: 50px/1.2 'Courgette', cursive;
  color: #fff;
  text-align: center;
  top: 130px;
  left: 25%;
  z-index: 1;
}
div {
  width: 280px;
  height: 300px;
  left: 20%;
  mix-blend-mode: multiply;
}

/* Circles */
.circle-1 {
  background: #f66;
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
  animation: border-animation 6s infinite linear;
}
.circle-2 {
  background: #f92;
  border-radius: 80% 30% 50% 50%/50%;
  animation: border-animation 4s infinite linear;
}
.circle-3 {
  background: #fc2;
  border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
  animation: border-animation 3s infinite linear;
}

/* Animation */
@keyframes border-animation {
  to { transform: rotate(360deg); }
}