Hello,

I think this is a hard one. I've got several objects I scattered along a semicircle path. This semicircle has the straight cut running horizontally in the bottom. I need to resize and skew all objects including a filled arc which lines (sits on top) with the aforementioned path. I group them all and do these operations and it's all good, each object preserves their gradient fill and looks nice.

The problem is I need to shrink everything horizontally, but still keep the original length in the semicircle cut. So I tried shrinking everything and then pulling from the "arc" path nodes and move them back to their original positions. The arc looks good but the scattered objects won't follow, of course. So they end up in the wrong places, far inside the semicircle. I tried selecting some of these with the arc, all their nodes and the one for the arc, but they will move, instead of deforming (expected) and they'll end up far outside the arc. I tried using perspective and envelope but the object fill gradients don't follow along and I just can't re-position every gradient handle for every object (I need to make several interpolated frames for which I'm afraid the automatic interpolation won't work well enough and there are too many objects). Ideally I guess I would use this other extension that bends a path along another path, but I can't combine all objects into a path or I'll lose the different fill gradients. I can't deform the arc alone first and scatter the objects later because I would lose the distortion effect I'm looking for in all of the objects.

At this point, I'm totally clueless on what to try next. Hopefully you experts can help me find a workaround or extension I can't think of by myself.

Thanks for any help

After giving it some thought I've come to realize this would require a different kind of gradient which I don't think it's currently supported nor if it can be supported as I have no idea of SVG format limitations. While it would be nice enough to have all gradient handles automatically moved proportionally to the deformed nodes (something I think it's not being done for now), this wouldn't account for the deformation. I mean, resizing and skewing can be translated into linear and radial gradients perfectly just by moving the corresponding handles, rotating, etc. But if you have, say an original circle with a radial gradient, deformed into a banana shape, the radial gradient can't be tailored to follow this shape. I guess this could be solved by adding support for new transitional gradients, where every stop would be defined by a set of nodes, forming a curve in the case of linear gradients, and a closed curve in the case of radial gradients, and where gradients would be a color interpolation between each corresponding nodes. Make it a matrix with interpolation curves if you want to make it more interesting, but the former should suffice for most cases.

I'd think there must be some SVG software out there that can do this, but I don't know. If there's not, well, that's weird, I can think of number of situations where this could be a very nice feature to have. I wonder if there's any ticket or request for this.

I guess that my only workaround for the moment is to use a raster graphics editor for such distortion, or just forget about distorting the scattered objects If I knew I could code this in little time I'd do it myself, but I know this is super involved and will take me anywhere from weeks to months to understand how the current code works, and a lot more to get this done. Also I'm not a fan of OO GNU C code (I presume this is being used), so this is not an option.

Anyways, if you have any ideas of other workarounds I'd like to hear. Thanks.

If you could show us a screenshot or other illustration of the problem, it would help us to understand what you're asking. So much of your explanation can be interpretted in a few different ways, and it sounds like a complicated problem to begin with. Personally I don't even have a guess about the image or what you need to do.

Screenshot or other illustration would be good, but the actual SVG file would be even better.

You mentioned "horizontal cut" which leads me to wonder if this is for a CNC or other kind cutter. But then later, something about a gradient, which of course doesn't make sense for cutting paths.

Hello, brynn and thanks for replying.

I made a new SVG which reproduces the problem and where I number every step to comment over here for clarity.
No, this is not CNC related. Sorry, I said "cut" as in "side". English isn't my first language.

So here we go:

http://imgh.us/inkscape-problem.svg

Subsequent steps:
1. The semicircle and a group of objects
2. objects scattered along the arc path
3. everything resized vertically
4. everything skewed horizontally
5. everything shrunk horizontally. At this point, ideally I would instead directly squeeze everything but the bottom side

These are not steps anymore but different approaches. A copy of 4 has been laid behind for referential purposes:
6. a copy of 5 centered over 4, matching (or trying to) rotational centers. After selecting the group comprising all elements, the arc nodes are dragged onto the referential nodes in the bottom side of 4. The resulting arc shape is quite what I want, but obviously the stars won't follow.

7. 5 over 4. Envelope bending used, admittedly not much care put into it. Just as in 6., stars won't follow either

8. Again 5 over 4. In this case the whole group of 5 has been converted to paths prior to using envelope bending. Morphologically (shape-wise or whatever this is called), it yields exactly the effect I'm looking for (had I put more care in bending, but that's a different story). However all the gradients are off. Now, setting all these gradients back onto where they should be, would work, although they wouldn't bend with their containers' shapes, but that would a lot better than the current result. Now, doing it by hand, not only for this instance, but for a lot more permutations of the whole picture I intend to use, is way too much work.

9. Here I used a copy of 1 (the arc only) and put it over 4. I performed all needed operations: resized, skewed, pulled bottom side nodes into place, and then scattered the stars over the arc. The arc's good, the stars follow the arc's path, but they're not deformed. I guess I'll end up using this one, as I'm having a lot of trouble deforming 5 afterwards with gimp's cage tool. But the stars not being deformed, is not nearly as cool as the shape in 8. I'm looking for this "pumping" effect the whole distortion gives as in 8, so that'd be a pity if I can't get it.

I'll appreciate any help.

There's a mesh deform path effect in the workings.
And an envelope path effect exists, too: http://tavmjong.free.fr/INKSCAPE/MANUAL ... ation.html
http://wiki.inkscape.org/wiki/index.php ... ormation_2

I dont understand what the end result of this is supposed to be, but it reminds me of this heathenX video:
http://screencasters.heathenx.org/episode-060/

It uses an envelope distort effect, before there was an LPE and its kind of a one node pull.

Thanks for your feedback.

Moini wrote:There's a mesh deform path effect in the workings.
And an envelope path effect exists, too: http://tavmjong.free.fr/INKSCAPE/MANUAL ... ation.html
http://wiki.inkscape.org/wiki/index.php ... ormation_2

Thank you, I'll be sure to check on this mesh deform effect. I used the envelope path effect in #7 and #8 already, albeit perhaps not correctly.

Espermaschine wrote:I dont understand what the end result of this is supposed to be, but it reminds me of this heathenX video:
http://screencasters.heathenx.org/episode-060/

It uses an envelope distort effect, before there was an LPE and its kind of a one node pull.

The desired result should look something similar to this:

Preferably with gradient distortions, but this is very acceptable.

I'm checking this video now. Thank you.

oxi wrote:The desired result should look something similar to this:

But what is it ? Is it a crown ?
Abstract art ?
Some kind of illustration ?
Starcreatures standing around a lake ?

There is a way to make a fake gradient with an interpolation.
Maybe that would help with the distortion ?

Hey! Thanks again for the video Espermaschine! I've come up with a workaround!

Espermaschine wrote:

oxi wrote:The desired result should look something similar to this:

But what is it ? Is it a crown ?
Abstract art ?
Some kind of illustration ?
Starcreatures standing around a lake ?

There is a way to make a fake gradient with an interpolation.
Maybe that would help with the distortion ?

Well, actually I made this SVG solely for showing the problem in question. The original is a different thing. So this was merely an abstract example. It can be anything you like

I remember watching a video about these gradient interpolations, but for this case this will be a lot of work to do for each element, so I'm happy enough with the result I got now, but thanks for mentioning this.

So here's what I got this time:

This is a lot better because I won't need to use envelope deformation and I'll be able to get more consistent results from frame to frame.
Here's what I did:
I converted #5 (which is all a group) into paths.
I then set the fill of everything to a solid black (this is necessary or the gradients will end up off as in #8)
I then combined all paths
I selected this huge path and went into node selection
I selected all nodes, held ALT key and grabbed the left lowermost node, dragged onto my reference node, and did the same for the rightmost lowermost node. Thanks for the video, again
I then uncombined all paths. And magic! The original paths were restored but still kept the new distortion. Cool
Then it was just a matter of ordering z, and just selecting similar objects and apply the relevant gradient fill and voila, all gradients properly centered. Even though they're not distorted this is very acceptable

Hopefully this will be useful to anyone else.

Anyways, sorry for all the noise, and thanks again for all your help.

Cheers

P.S.: If you know of a simpler or better way to do it, please comment!

Glad that helped !