Different types of moving svg text

1. Basic svg example

Basic svg example. Lets try to do the samee stuff using canvas.

See the Pen svg basic example by ilya (@ilyabasiuk) on CodePen.

2. Canvas example

As you can see we have the same problems with animation. So that it is not svg problem. But why we have no problem with animation of vehicles shape? The answer is - because we have no thin vertical or horizontal lines and text there. Lets try make our lines not so vertical.

See the Pen canvas realization of moving labels by ilya (@ilyabasiuk) on CodePen.

3. Svg example: transform="rotate(1 0 0)"

Or lets try to apply scew transforamtion.

See the Pen svg rotated by ilya (@ilyabasiuk) on CodePen.

4. Svg example: transform="skewY(1)"

The results of 2 last demos are preety similar: less quaking, but text is more blurred. Also it enough noticable that label is not horisontal. Ok lets try to draw horisontal label with non straight lines and text. Like on the image below:

See the Pen svg rotated by ilya (@ilyabasiuk) on CodePen.

5. Svg example: besier curve

Looks better, but we also can change a font a little.

See the Pen new rect by ilya (@ilyabasiuk) on CodePen.

6. Svg example: bezier curves + changed font

What do you think about the last demo? Also It worth to do perfomance test, because I don't how could it influence on perfomance.

See the Pen new rect by ilya (@ilyabasiuk) on CodePen.

Same demo but with request animation frame (for ie)

See the Pen reques animation frame by ilya (@ilyabasiuk) on CodePen.