Pulse effect css only animation like supercell logo

Hello Friends,

Please have a look at this 2 second video:

You’ll see their SUPERCELL logo with a quick glow behind.

I have tried to achieve something similar here:
https://codepen.io/ptim123/pen/OJJyYbr

But the “pulse” div will leave a little black hole in the effect, and I need it there to get the border-radius.

Any suggestions on how to fix this? Also is it a good idea like I have done to put the pulse in a seperate div?

If you sett a box-shadow inset to the same colour as the glow then you wont get the black dot.

I would also use the :after pseudo element instead of using an extra div. Also lose the webkit prefix as you want it for all browsers.

here’s a quick revamp to test.

https://codepen.io/paulobrien/pen/vYYNqgq

2 Likes

Wow great, exactly what I was aiming for. Thank you!

1 Like

If you look at this codepen:
https://codepen.io/ptim123/pen/abbvevg

You could actually see a smal dot, whats wrong with this example?

Try changing the width and height down to 2px.

https://codepen.io/paulobrien/pen/rNNOXZB

It works with zero but loses the roundness.

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