Radial Gradients

[MayOlu]

Ho do we do a tool like this in Wick Editor?

[MayOlu]

[Jaxon_Hudson]

well Scratch-like cursor is a fork of wick editor and will be adding gradients soon

[MayOlu]

(Example)

[MayOlu]

So How do we get a Radial Gredient like this?

[Jaxon_Hudson]

I dont thinks it possible yet

[MayOlu]

… It works with linear…

[Jaxon_Hudson]

whoa how did you do that

[MayOlu]

With A Codehttps://forum.wickeditor.com/t/gradient-tool/8491/2?u=mayolu

[MayOlu]

GradientTool1-23-2022_17-44-49.wick (2.5 KB)

[MayOlu]

So is there a way??

[Moh_Animator]

Not yet, but @StickmanRed will be adding one to his/her created fork.

[MayOlu]

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

[MayOlu]

[FroggyWadd]

yeah the only way to do this is with code :(

[noobfield]

Paper.js is the main render in Wick, you can make gradients with it, and just pass the paths directly to Wick, or simply make a Paper.js Path with a gradient SVG and put it into Wick!

[noobfield]

I GOT ONE!!!

Process analysis

To make a Wick Path, you must first make a Paper.js Path, then translate it into Wick. After that, insert it to the current frame and done!

My Project5-26-2025_16-02-03.wick (1.5 KB)

[noobfield]

Some code:

// Make Paper.js Path:
var path = new paper.Path.Circle({
    center: paper.view.center,
    radius: paper.view.bounds.height * 0.4
});

// Fill the path with a radial gradient color with three stops:
// yellow from 0% to 5%, mix between red from 5% to 20%,
// mix between red and black from 20% to 100%:
path.fillColor = {
    gradient: {
        stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
        radial: true
    },
    origin: path.position,
    destination: path.bounds.rightCenter
};

// Create Wick Path
var wPath = new Wick.Path({path: path});

// Add path to frame:
project.activeFrame.addPath(wPath);

[MayOlu]

Is there a way to make transparent gradients???

[MayOlu]