Create Gradients Programmatically

[Realto]

I have a slew of gradients that I want to create, but creating them all manually could take me well into retirement age.🤪 Is there a way to do it programmatically?

• Are gradients stored as a text string somewhere?
• Or if I created them as images could they be captured via the same approach that is used to create single color palettes?
• Are macros something that would work for a task like this?
• Anything that I haven't mentioned would be awesome as well.
• Ideally, being able to convert CSS into gradients would be preferable, but I can work with anything that's faster than doing them all manually.

Thanks in advance,

Paul

[David in Яuislip]

7 hours ago, Realto said:

Is there a way to do it programmatically?

How's your Python?

https://pypi.org/project/drawsvg/

you can find a handy Drawsvg Quick Reference here
https://github.com/cduck/drawsvg

then the svgs can be opened in Affinity. Here's one I made after a few minutes, a mere 8 lines of code
Good luck

GradRect.svg

[NotMyFault]

SVG files are plain text and can be edited with any text editor or created from Excel.

you just need to learn the syntax, which is really simple.

 

[Realto]

On 11/9/2024 at 9:09 AM, David in Яuislip said:

How's your Python?

https://pypi.org/project/drawsvg/

you can find a handy Drawsvg Quick Reference here
https://github.com/cduck/drawsvg

then the svgs can be opened in Affinity. Here's one I made after a few minutes, a mere 8 lines of code
Good luck

GradRect.svg 507 B · 0 downloads

Perfect! Exactly what I was looking for. I can mass-generate all that I need with a simple JS function and now I won't have to deal with the manual way of creating them which is worse than watching paint dry as well as painful after only a few with the constant trackball input required to make one. If you're interested, I'll post the results after I make some progress so I can share the wealth. Quality gradients seem to be a bit scarce in Designer.

[Realto]

On 11/9/2024 at 9:55 AM, NotMyFault said:

SVG files are plain text and can be edited with any text editor or created from Excel.

you just need to learn the syntax, which is really simple.

 

I wasn't aware that they could be copied so easily and imported into a palette that way, so this should be a perfect solution. I already have a JS app I created that generates CSS gradient code that will just need a few slight modifications. I'll post the palette that I create in here in a few days if you're interested.

Thanks!

[Realto]

Ok, here's my first automated palette. It took several hours to set it all up and get it working right. I wound up using PHP to generate the gradients and save them as files. Once the files were all created, I think it took all of 10 minutes to get them added to a new palette in Designer. Doing it manually would have taken several entire work-weeks and an advanced case of carpal tunnel.

These are all two stop gradients. I'm also going to add a few stops and test them out to see how those look.

Now, the only real challenge is combining the colors effectively, which is exactly how it should be!

Thanks again!

If anyone is interested in additional gradient palettes that I create, reply in here or send me a DM (if that's possible in here) and I'll post anything new.

Gradients2024.afpalette

[kaffeeundsalz]

@Realto Great work, thank you. What I didn't get entirely: How did you create the .afpalette file with the gradients? Were you able to automate that process, too, or did you sample the gradients manually by selecting each object from the SVG file in Affinity and using the Swatches panel to add the fills to the palette?