CSS Blobs Animation - css

Question

Trying to make these gooey CSS moving blobs. The basic setup seems to be that you give the circles blur and then add contrast to their container. The issue is that whenever I do that with custom colors the entire element just disappears. I tried it on these demos and same thing. Does anyone know why or know a workaround?
Here is a tutorial I've been following:
https://css-tricks.com/shape-blobbing-css/
Here is the code:
$(document).ready(function() {
$(".dot").hover(function() {
var cur = $(this);
var dest = cur.position().left;
var t = 0.6;
TweenMax.to($(".select"), t, {
x: dest,
ease: Back.easeOut
})
});
var lastPos = $(".select").position().left;
function updateScale() {
var pos = $(".select").position().left;
var speed = Math.abs(pos - lastPos);
var d = 44;
var offset = -20;
var hd = d / 2;
var scale = (offset + pos) % d;
if (scale > hd) {
scale = hd - (scale - hd);
}
scale = 1 - ((scale / hd) * 0.35);
TweenMax.to($(".select"), 0.1, {
scaleY: scale,
scaleX: 1 + (speed * 0.06)
})
lastPos = pos;
requestAnimationFrame(updateScale);
}
requestAnimationFrame(updateScale);
$(".dot:eq(0)").trigger("mouseover");
})
.text {
position: relative;
left: 110px;
top: 10px;
font-family: 'Baskerville', Georgia, serif;
font-size: 17px;
}
a {
color: inherit;
}
.dots {
list-style-type: none;
background: white;
-webkit-filter: blur(5px) contrast(10);
padding: 0;
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: -10px;
padding-right: 10px;
position: relative;
left: 100px;
top: 30px;
}
.dot {
display: inline-block;
vertical-align: middle;
border-radius: 100%;
width: 30px;
height: 30px;
background: black;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
color: white;
position: relative;
z-index: 2;
}
.select {
display: block;
border-radius: 100%;
width: 40px;
height: 40px;
background: black;
//opacity:0.6;
//transition:transform 300ms ease-in-out;
position: absolute;
z-index: 3;
top: 15px;
left: 0px;
pointer-events: none;
}
<div class="text">
<h1>Gooey pagination</h1>
Based on a dribbble by Kreativa Studio. <br />
Made by Lucas Bebber. <br /> <br />
Hover on the dots bellow
</div>
<ul class="dots">
<li class="select"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
If you go to one of their demos and try changing the color to something like pink or #A0D9A8 you'll see what I mean:

Answer 1

This is really interresting. It seems that to work the color must cause a very strong contrast because of the filter rule used. So you will have to use flashy colors to make them appear. The colors pink or #A0D9A8 aren't flashy enought for the blur that's going to make him disappear. So try to use more flashy colors like #e83ce8 that's like a pink color:
$(document).ready(function() {
$(".dot").hover(function() {
var cur = $(this);
var dest = cur.position().left;
var t = 0.6;
TweenMax.to($(".select"), t, {
x: dest,
ease: Back.easeOut
})
});
var lastPos = $(".select").position().left;
function updateScale() {
var pos = $(".select").position().left;
var speed = Math.abs(pos - lastPos);
var d = 44;
var offset = -20;
var hd = d / 2;
var scale = (offset + pos) % d;
if (scale > hd) {
scale = hd - (scale - hd);
}
scale = 1 - ((scale / hd) * 0.35);
TweenMax.to($(".select"), 0.1, {
scaleY: scale,
scaleX: 1 + (speed * 0.06)
})
lastPos = pos;
requestAnimationFrame(updateScale);
}
requestAnimationFrame(updateScale);
$(".dot:eq(0)").trigger("mouseover");
})
.text {
position: relative;
left: 110px;
top: 10px;
font-family: 'Baskerville', Georgia, serif;
font-size: 17px;
}
a {
color: inherit;
}
.dots {
list-style-type: none;
background: white;
-webkit-filter: blur(5px) contrast(10);
padding: 0;
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: -10px;
padding-right: 10px;
position: relative;
left: 100px;
top: 30px;
}
.dot {
display: inline-block;
vertical-align: middle;
border-radius: 100%;
width: 30px;
height: 30px;
background: #e83ce8;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
color: white;
position: relative;
z-index: 2;
}
.select {
display: block;
border-radius: 100%;
width: 40px;
height: 40px;
background: #e83ce8;
position: absolute;
z-index: 3;
top: 15px;
left: 0px;
pointer-events: none;
}
<div class="text">
<h1>Gooey pagination</h1>
Based on a dribbble by Kreativa Studio. <br />
Made by Lucas Bebber. <br /> <br />
Hover on the dots bellow
</div>
<ul class="dots">
<li class="select"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>

Answer 2

Check what it says on the entire page over on CSS tricks, about brightness especially.
You just need to change the following and you will see pink blorbs.
.dots{
...
-webkit-filter: blur(5px) contrast(10) brightness(-50);
...
}
.dot {
...
background: /* black */ pink;
...
}
.select { /* EDIT */
...
background: /* black */ pink;
...
}
EDIT: I used a CSS variable in this fiddle:
https://jsfiddle.net/p97qxzew/