`<!DOCTYPE html>
Dual Warping Liquid Effect
<br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
overflow: hidden;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
background: black;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.warp-container {
display: flex;
width: 100%;
height: 100%;
}
.warp-section {
position: relative;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.warp-effect {
position: absolute;
width: 90%;
height: 90%;
filter: url(#warpFilter);
}
.left .warp-effect {
background: linear-gradient(45deg, cyan, blue, purple);
}
.right .warp-effect {
background: linear-gradient(45deg, red, orange, yellow);
}
.center-orb {
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 0, 255, 0.8), rgba(0, 255, 255, 0.6));
border-radius: 50%;
filter: blur(20px) drop-shadow(0 0 30px rgba(255, 0, 255, 0.8));
animation: morph 5s infinite alternate ease-in-out, pulse 3s infinite;
}
@keyframes morph {
0% { border-radius: 50%; transform: scale(1) rotate(0deg); }
50% { border-radius: 40% 60% 50% 50%; transform: scale(1.1) rotate(30deg); }
100% { border-radius: 60% 40% 50% 50%; transform: scale(1) rotate(-30deg); }
}
@keyframes pulse {
0% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
50% { filter: blur(25px) drop-shadow(0 0 40px rgba(0, 255, 255, 0.9)); }
100% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
}
svg {
position: absolute;
width: 0;
height: 0;
}
</style>
</code></pre></div>
<p></head><br>
<body><br>
<div class="warp-container"><br>
<div class="warp-section left"><br>
<div class="warp-effect"></div><br>
<div class="center-orb"></div><br>
</div><br>
<div class="warp-section right"><br>
<div class="warp-effect"></div><br>
<div class="center-orb"></div><br>
</div><br>
</div></p>
<div class="highlight"><pre class="highlight plaintext"><code><svg>
<filter id="warpFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="6" seed="3">
<animate attributeName="seed" values="3;6;9;3" dur="5s" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="50">
<animate attributeName="scale" values="20;50;30;70;40;20" dur="6s" repeatCount="indefinite"/>
</feDisplacementMap>
</filter>
</svg>
</code></pre></div>
<p></body><br>
</html><br>
`</p>
Top comments (0)