I have image below which is text mixed with dots.

enter image description here

As the paths are not in order from left until right, how would one approach animating from left to right?

The only way I can think is to label each dot in a vertical row and then using css to time an animation to pulsate the text. Is there any way I could do this dynamically?

  • 2
    What you're trying to accomplish is not very clear. Please try to convey exactly how you're wanting to animate it. Also, can we see the SVG markup? How did you create the SVG? – Zach Saucier Nov 10 '16 at 2:56

You could just use your image and using a position transition using CSS.

But You probably are refering that the dots should stay fixed in space and start iluminating as the letters pass along.

That is probably easier to animate in After effects or other aplication (inclusive Photoshop) using a dotted pattern mask and moving a layer below the pattern, and exporting it as an animated gif. (You can slightly see that the E is on a square below the pattern)

enter image description here

But using the same logic, you could use a transparent PNG as a mask, and animating a div below the image, again using CSS.

img {
  background-image: url(E.png);
  background-repeat: no-repeat;
  transition: all linear 1s;}
img:hover {
  background-position: 0px;}

<img src="Mask.png" />

Open this and mouse over the grid.


You need to synchronize the speed of the animation, so you do not have half circles. But this was just a simple test.

In this examples I left the grid gray so you can see it, but the efect would be better of course using white.

| improve this answer | |

You can achieve this result in different ways. But the most elegant way that came in my mind is to use SVG masking for this. Sara Soueidan wrote a great article about this: https://sarasoueidan.com/blog/css-svg-clipping/

In a nutshell you can do the following:

  1. Group each line
  2. Duplicate each group and adjust its color.
  3. Apply a mask to each duplicated group, so all duplicated groups will be hidden.
  4. Animate you mask in browser with CSS or JS.

The advantage of this method is that you can apply not only color but image or even movie to be masked. Hope this will help you :)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.