The Nature of Code book is a great resource. Dan also deep dives on specific topics on his YouTube channel.

- https://natureofcode.com/book/

- https://www.youtube.com/c/TheCodingTrain

I don't have a list, but "processing" language is very good at art and math(s) stuff

https://processing.org/

it has some cool demos/ examples

https://processing.org/examples/

and it's opensource

I would refer you to the demoscene. (I'm surprised to be the first one to mention the word in this discussion.)

This guy has a lot of interesting stuff on his site: https://iquilezles.org/

It's more art than code, maybe start drawing a city skyline. Have different basic types of roof (triangle, trapezoid, none), windows (round, square, subdivided) and a variable number of flours. Play around with it in html canvas.

I have some generative art tutorials using p5js on my blog @ https://brianfernandez.dev/art

In terms of the drawing aspects, working on SVG or raw canvas drawing each have some drawbacks. If you don't need to output vector files, I recommend PixiJS, which gives you a stage-based display chain on top of WebGL where you can mix free-form line drawing with pre-made sprites. I used to write a ton of procedural graphics with Actionscript, and this has been my clearest path to continue on those projects. Some AS3 drawing code is almost directly portable.

https://www.pixijs.com/