Hello @Jonathan, thanks for getting back at me so quickly and many apologies for thoughtlessly manipulating the codepen example. I’ve restored it in order to show the original problem.
The OS is macOS High Sierra 10.13.6
Chrome: Version 70.0.3538.102
Safari: 11.1.2 (also on iOS Safari, recently updated, so probably newest)
Best Result in Firefox (Nightly, 65.0a1)
You are right, when I animate the scale instead of the width, the animation runs smoothly. However, other problems arise, i.e. the vectors get distorted (but not how they should) and/or overlap.
The original idea was to get a couple of SVG-Shapes to stretch and contract horizontally, in such a way that they push and pull on each other without ever overlapping. In order to do this it is (I think) neccessary to a) interpolate between a contracted and an expanded set of coordinates for every Vector b) change the width of the SVG’s viewBox and of the SVG itself.
Is there a way of achieving this without animating the width attribute?