SVG File processing Problem

lastvector's Avatar


25 Jun, 2024 05:18 PM

Hi John

I'm stuck with a nodebox tree that I created.

A while ago I found a little circle packing program.
It lets you convert a bitmap into a vector graphic based
on a circle packing algorithm and save the result as an SVG file.

I was able to create me a Nodebox Tree which load this SVG File
and replace the circles with a vector object i like.
That works fine so far.

A little later I expanded the whole thing to be able to
change the distance between the circle positions.
Which also works.
But there is one problem that I couldn't solve.

As you can see from the screenshot, there is a large circle
in this conversion. This seems to be somehow related to
the "Fit To" Node. But I couldn't figure out how. Or how
to delete or suppress this circle.

You find the Nodebox Tree and the SVG in the Zip File
in the file attachment

Do you have any ideas?


  1. Support Staff 1 Posted by john on 25 Jun, 2024 11:29 PM

    john's Avatar


    There are 1972 shapes in your SVG, all circles EXCEPT the first one. The first shape is the rectangular white background.

    So when you make 7x7 ellipses from all those shapes, you turn that first rectangle into a 7x7 ellipse at the origin. Then when you fit it back to its original size, you get a big ellipse as wide as the original rectangle.

    The solution is simply to add a rest node after your initial ungroup of the SVG to discard that rectangle.

    I spotted this by hooking a slice node right after the ungroup to step through the shapes looking for anomalies; since the rectangle was right at the front I spotted it immediately. Using a slice node like this as a kind of microscope is a very useful trick that often pays off when debugging things like this.

    Incidentally, there is an easier way to expand all the circles: just ungroup them, get their centroids, and then simply feed the ungroup node and the centroid node into a translate node. This instantly doubles the space between circles!

    This works because when you translate each circle at X,Y by X,Y it moves the circle to 2X,2Y (without increasing the size of the circle). If you want to adjust this, just feed the centroid node into a scale node before feeding that into the translate node.

    Nice pattern by the way!

  2. 2 Posted by lastvector on 26 Jun, 2024 09:38 AM

    lastvector's Avatar

    Hi John

    Thanks for the Tips.

    Placing the "Rest" Node after the "Ungroup" Node
    caused other Problems (some misplacing circles)
    see the picture below.

    But i found the Solution by placing the "Rest" Node
    at the very End of the Node Tree. After that, everthing
    works as exspected.

    So everything is fine now.

    Thank you, for your help
    have a nice day


  3. 3 Posted by lastvector on 26 Jun, 2024 09:52 AM

    lastvector's Avatar


    I've been working on this node tree idea for quite a while.
    Sometimes it takes a while to get the idea of ​​how to
    approach something because ideas sparks step by step :)

    Here are two of my attempts.
    Created with the help of VectorStyler which have a
    Feature call Repeater, is a bit like Grids in Nodebox
    but with a few extra options. The Pattern where also
    deformed with a Shape Effect.

    And a Version of the Circle Flower, where i replaced
    the Circles with a Star shape and colored it.


  4. Support Staff 4 Posted by john on 26 Jun, 2024 11:14 AM

    john's Avatar


    I should have been more clear or provided code. When I said add a rest node after ungrouping, I meant everywhere you ungroup (before the branch into your two subtrees). The misplaced circles happened because you removed the rectangle from the right subtree, but not from the left, so the left subtree had one more item in the list than the right.

    No matter. Adding the rest node at the bottom to remove the giant circle also works, as you showed.

    These designs are really cool. This is a great technique and another good example of finding a synergy between Nodebox and VectorStyler.

    Thanks for sharing!


  5. 5 Posted by lastvector on 26 Jun, 2024 11:35 AM

    lastvector's Avatar


    ...When I said add a rest node after ungrouping, I meant everywhere you ungroup (before the branch into your two subtrees)....

    I gave this also a try and it works too.

    I didn't think of that either.
    But it's good to know what caused this misplacement.
    For future projects :)


Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Already uploaded files

  • CirclePacking-Problem.png 286 KB
  • 21.1 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

23 Jul, 2024 04:46 PM
22 Jul, 2024 07:50 AM
11 Jul, 2024 03:48 PM
28 Jun, 2024 01:51 PM
27 Jun, 2024 02:56 PM


27 Jun, 2024 01:57 PM
26 Jun, 2024 08:17 PM
26 Jun, 2024 11:35 AM
24 Jun, 2024 02:42 AM
24 Jun, 2024 12:46 AM
23 Jun, 2024 08:07 AM