Jump to content


DrawSVG - queue inset paths?

Recommended Posts

Hey guys,


I hope I can get this across since english isn't my native language.


I have a SVG-Logo which consists of several letters which have inset paths (like the "O", outside path, and inside path).


Is there a way I can queue the inset paths to be drawn after the outside paths, and still be able to fill the whole letter?



I tried to exclude the inset path to its own <path> element - this way I can draw the paths one after another. But I guess now I won't be able to fill the area between the outer and the inner path, only the area inside the inner path which is supposed to be transparent.


I made a CodePen of it (without the actual images, I don't know how to import local images into a CodePen yet; the background is a close-up of human skin, the red box is actually an arm / hand holding a tattoo machine)



Thanks in advance, you guys always find a way, I really love the forums here <3


Best regards,


See the Pen emzdwq by LilaQ (@LilaQ) on CodePen

Link to comment
Share on other sites

To import images for a non-pro account you can use free hosting websites like photobucket and link them from there as they provide a url to use as image source, and it works for cross-domain linkage.


For the fill you can fill the outer element like this: 


And the inner like this for transparency (I haven't tested this on svg but it should work I guess)

Link to comment
Share on other sites

If I fill the inner like you said, wouldn't that just show the color of the outer path? Since it lays over the outer path-object?!


Please correct me if I'm wrong.

Link to comment
Share on other sites

I just checked the W3 Docs and fiddled around with the 2 objects, there is no way to overwrite the bottom elements colored fill with the top elements transparent fill, so I guess this is a dead end.


Only other way I would see is a non-minified version of the DrawSVGPlugin and modifiy it to tween multiple lines in a single path-object consecutively.


Any hints, ideas etc.?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.