Morphing Blobs

1<template>
2  <div class="blobs"><span class="b1"></span><span class="b2"></span></div>
3</template>
4<script>
5export default {}
6</script>
7<style>
8.blobs{position:relative;width:440px;height:260px;border-radius:20px;overflow:hidden;background:#0a0a12}
9.blobs span{position:absolute;width:220px;height:220px;filter:blur(40px);opacity:.6}
10.b1{background:#8b5cf6;top:-30px;left:-20px;border-radius:60% 40% 50% 50%;animation:m1 8s ease-in-out infinite}
11.b2{background:#06b6d4;bottom:-40px;right:-20px;border-radius:50% 50% 40% 60%;animation:m2 10s ease-in-out infinite}
12@keyframes m1{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(30px,20px) rotate(40deg)}}
13@keyframes m2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-30px,-15px) rotate(-30deg)}}
14</style>