How to approach animating a svg from left to right? [Web]

Question

I have image below which is text mixed with dots.

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?

Answer 1

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)

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

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

<img src="Mask.png" />

Open this and mouse over the grid.

http://otake.com.mx/Foros/MaskTest/Test1.html

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.

Answer 2

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 :)