Css animation

Have been trying the single dots turn in to two dots make like bone shapes https://codepen.io/Gayathri-Mohan-the-sans/pen/VwVdxMP, but couldn’t achieve this any suggestions ?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Exo+2');

* {
   margin: 0px;
   padding: 0px;
   box-sizing: content-box;
}

html, body {
   width: 100vw;
   height: 100vh;
   background: #0d0722;
}

body{
  display: flex; 
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-family: 'Exo 2';
  font-size: 24px;
  animation: fadeIn 500ms reverse;
}

.gooey{
  background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  animation: move2 5s infinite ease-in-out;
}
.gooey2{
  background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
  border-radius: 50%;
  width: 150px; 
  height: 150px;
  animation: move 5s infinite ease-in-out;
}

.gooey:before{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
}

.gooey2:after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  /* box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21); */
  animation-delay: 200ms;
  /* background-image: linear-gradient(120deg, rgba(0,67,255,.55) 0%, rgba(0,103,255,.89) 100%); */
}


.gooey:before{
  animation-duration: 1.5s;
}

.gooey2:after{
  animation-delay: 400ms;
}

@keyframes move {
  
  0% {
    transform: translate(-100px, 0);
    border-radius:50% 0 0 0;
  }
  
  10% {
    transform: translate(100px, 0);
    border-radius:50% 30% 0 0;
  }
  100% {
    border-radius:50% 30% 30% 0;
    transform: translate(-150px, 0);
  }
  
}
@keyframes move2 {
  
    0% {
    transform: translate(0px, 0);
    border-radius: 50%;
}
10% {
    transform: translate(-50px, 0);
    border-radius: 50% 30% 0 50%;
}
100% {
    border-radius: 50% 20% 20% 50%;
    transform: translate(-100px, 0);
}
  
}




</style>


</head>
<body>

<div class="gooey"></div>
<div class="gooey2"></div>

</body>
</html>

There’s an old article and also here on CSS tricks.It uses an svg filter for the gooey effect.

I just adapted it to create this effect.

(Seems to make the page run a bit slow on my slow connection.)

Hi @PaulOB ,

Awesome can be done with out SVG ? only HTML and CSS ? the other example have some blur effects without that , tried to remove the blur but it dint work as expected, also it has to have the inear-gradient effect

Hi,

I did see some examples using blur and contrast and have adapted them as follows.

I can’t see a way to get the linear gradient to merge as its not one element but 2. This example use mix-blend mode but its hard to mix everything together so its a bit hit and miss.

I think you’d need more sophisticated methods to get the gradient.

1 Like

Adding a middle to Paul’s animation so it become more like a bone :grinning: . . .

But how to blur the middle?

1 Like

Thank you @PaulOB ,

Do u think if we apply as background images with gradient effects on the circle will it work ?

thank you @Archibald

A linear-gradient is essentially treated the same as a background image so there’s no benefit to using an actual background image.

There’s no problem to apply a gradient to each circle but when the blobs join you essentially want one gradient not two jarring gradients.

That’s why in the last demo I tried putting the gradient on the element behind and letting the circles essentially be blank. It didn’t really work as the blur and contrast interferes with the effect and it’s the blur and contrast that gives the blob effect (catch 22).

I’ll have to have another think about it :slight_smile:

Hi @PaulOB ,
Thats okie the above svg will do well , thank you , and you are awesome.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.