🏠 back to Observable

Bug or code problem?

I made this notebook to better understand spirals, but there seems to be some inconsistencies with what I expected.

  1. On the first spiral, the circle doesn’t start moving right away; you need to move the speed nob first.
  2. The textPath isn’t directly on the path but goes over and under.

Any insights would be greatly appreciated!

1 Like
  1. That is odd. I added xlink to the href so the saved svg would work with Inkscape.

    And the text is correctly drawn there.

Even loading the saved SVG into the browser (without the xlink:) it displays fine.

Saving the SVG and loading it as a file attachment also follows the path correctly.

Tested in Chrome, Firefox, Opera, vivaldi and observable doesn’t render the path right.

I see this is also logged in our feedback repo here: textPath doesn't stay on path, animated circle doesn't start on notebook load · Issue #101 · observablehq/feedback · GitHub
I sent you a suggestion with some tweaks, but it looks like the path for the text and the path for the spiral are not calculated the same way…

But it renders correctly if you save the bad SVG and load it in as a file attachment with no changes to the paths.

very strange…

OK, I think we found the problem. There are too many spirals on that html document :slight_smile: Seriously though that is the actual problem. You are defining multiple #spiral ids on the page (looks like 4…).

When you make them unique (#spiral1, #spiral2 etc) that should fix the problem.
A better solution would be to call DOM.uid to generate an automatically-unique name for your ids.


:sweat_smile: I was wondering about that when I was coding and then promptly forgot. Well, lesson learned! I’ll try to DOM.uid method, as I’ve never used it before. Thanks so much for your help!