Hi all,

I'm trying to create an image where the gradient moves not from the centre of the circle as drawn, but instead radiates from the objects... (the shapes inside)
https://i.stack.imgur.com/vPYZh.png

I tried creating a heap of gradients on top of each other but it looked really bad
https://i.stack.imgur.com/deBf4.png

I've also tried using a mesh pattern which I've seen many people reference on these forums, but when I try to use it I just get a checker board pattern!

Any suggestions?

Thanks!

Most people use blurry objects for this. You can set the node colors for the mesh gradient by selecting the nodes with mesh gradient tool and applying a color to them.

For the gradient mesh, you can move those nodes around. They don't have to stay in the rectangular grid. Also, on the control bar, you can choose a conical mesh. I would probably use the rectangular mesh, and move some of the nodes around, because the conical mesh confuses me (if you drag those nodes, it seems that some of them overlap each other). (And of course change their color, as Moini said.)

Hhm, I thought Interpolation might work, but I'm not having any success. Here's a sort of manual way to do what I thought Interpolation would do. It's what Moini refered to as using blurry objects. Actually, I think I'll make a video, because it's fairly involved. (I'm not very good at videos, but at least it will show you what to do.

(brynn, the link is missing)

I know, I only just now finished it. I'm not very good at this (or fast), but there's only one way to get better (practice x 3) (or 30 !).

Ok, so I didn't finish the whole thing, because it will be a time intensive project. But this is really the only way I can think how to do this.

https://inkscapecommunity.com/jd/vids/rgr.mp4

Note the part where I selected the original inner shapes and filled them with white. That means that that area won't be transparent. So if you need it to be transparent, it will probably involve even more work. So if you need that, let us know, and whoever is around can help.

Also, there is a way to make each bigger object the same amount larger each time, which I didn't go in to (because more tedious steps). So if you'e like to do that, let us know and we'll explain.

If you make each object bigger by a tiny amount, say 2 to 5 px, you wouldn't necessarily even need to blur it. Our human eyes sort of blur it for us, because the size is so close. Oh, well actually, that might even be the best way to approach it. Because it's the blur that's the reason filling the original shapes with white is necessary. If you don't use blurring, there's an easy way to make that area transparent. I can make the video part 2, if that's what you want to do.

Edit
Also note further that the process can be sped up quite a bit by using keyboard shortcuts. I use the menus and buttons to make it easier for newbies to understand (and also because I don't have a way to show which keys I'm using) (yet). But rather than going back and forth, switching from the Selection tool to the Node tool and back and all that, you can press a couple of keys to switch. Selection tool is the s key, Node tool is the n key.

Just had another thought worth mentioning. For the screenshot you showed, the first one with the single radial gradient. It is possible to move the center of the gradient. It would not conform to the shapes -- it will always be either circular or elliptical. But you could at least move the center.

Select it with the Gradient tool. Grab the little square at the place where the 2 "arms" meet, and drag it over to where the inner objects are.

If that would be acceptable, it's absolutely the easiest way!

Is this what you are trying to achieve ?

brynn wrote:the conical mesh confuses me (if you drag those nodes, it seems that some of them overlap each other).

This is because the conical mesh is actually just a rectangular mesh but distorted into a circular shape, not a "true" conical gradient (still not supported by SVG). The overlapping nodes at the center are effectively all the nodes along one edge of the rectangular mesh, all moved to the same position. I describe this in a little more detail in my tutorial in Full Circle Magazine #119:

viewtopic.php?f=6&t=11981

Maybe like so?


Cheers
P.

Hi everyone, thanks so much for your assistance!
I haven't got around to trialling it out yet but should be able to today. I'll let you know how I go. I am not trying to make a face, more a fading out company logo, but due to IP reasons I just made a couple of random shapes

@Brynn, that video was SO USEFUL! I doubt I would have understood without the visual guidance.
Thank you very very much!

https://i.stack.imgur.com/fbalf.png

I've attached my practice attempt which worked ok, but I used outset or ctrl + ) to change the size for my proper one and it looked great! I also graded by much smaller colour change.

The part that took the longest was changing the colour, is there keyboard shortcuts for that?

But overall I'm very happy, thanks so much for your help!

You're welcome.

The only way I can think to make changing the colors faster, would be to find a palette which already has the colors you want to use. It needs to be a GPL palette, which is the same type of palette file that GIMP uses (which means there's a good chance of finding them). Or you could make your own palette, if you can't find one and you think it's worth the effort. It's not terribly hard, and I think I know a tutorial.

Anyway, with the palette installed, instead of clicking a few times to adjust the color, you would just click once on the next color chip on the palette.

Part of the reason I did it that way, is because I didn't know what kind of "gradient" you wanted. Blue to green or whatever. But if it's going to be the same color, with just different values for either L or A (bars in the Fill/Stroke dialog), you could just highlight the last number in the spinbox, and type in the number which is 2 or 3 or 5 (or whatever) higher or lower. So like change 143 to 147. That might save one click or 2. But it's kind of a toss up, which way is faster.
_______________________________________________________

Of course I'm no programmer.....but it seems like there ought to be an easier way to do this. I'll bet it would be possible to make an extension which uses the gradient mesh for this -- a conical mesh. It would automatically place the inner nodes, evenly spaced along the inner path. And the outer nodes evenly spaced along the outer path. And then the 2nd row of nodes from the middle would align with an invisible outset path. The number invisible outset paths would be determined by the size of the mesh...or maybe vice versa, where the size of the mesh is determined by how many invisible outset paths there are. So each row of mesh nodes would be aligned along its respective invisible outset path.

It seems like if you knew the right codes, it should be do-able? Of course currently we're limited to only 20 x 20 meshes. And this project looks like there must be at least 50 outset paths.

Well, and it wouldn't work if there is more than one inner path, like in the final product here. But if the inner path was a single path, it should work. Right?

I've been thinking of trying to learn a little PHP, to make it easier to manage my forums. But when I looked at the W3Schools tutorial, it says you need to know JavaScript first. But if python is easier to learn than javascript, maybe I would try to learn some of it, and put off the JS for awhile? Would an extension like that need advanced python, or could it be done with simple python? Or is that not really a realistic way to look at it?