Making SVGs get bigger the further from the center of the canvas they are

Hi Guys - Totally new user here hoping to become an established community member, nice to meet you all.

I’m hoping to create a project which has randomly rotated scalene triangles (or acute triangles) that are barely visible at the center of the canvas and get bigger as they approach the edges of the canvas.

I’d also like to be able to put an object e.g. a circle at the center of the canvas and the triangles only start from the edge of the circle and I can change the size of the circle. Creating a tunnel effect.

Can anyone assist me with this? Many thanks

Here is my code but just random positioning so far

colors = new HColorPool(#FFFFFF, #808080);

pool = new HDrawablePool(9000);
	.add(new HShape("svg2.svg"))

		new HGridLayout()

		new HCallback() {
			public void run(Object obj) {
				HShape d = (HShape) obj;
        .size( (int)random(50,60) )
        .rotate( (int)random(360) )
        .loc( (int)random(width), (int)random(height) )



Hi @Noobcessing,

A warm welcome to the forum!

Unfortunately I’ve never checked out the Hype Library so can’t help on that approach…

— mnse

1 Like

Thanks for the welcome

I’d be interested in learning other approaches. I didn’t even realise I was using Hype tbh. What one would you choose to use?

Hello @Noobcessing,

I suggest you peruse the resources here:

Consider using PShapes.

Tutorial on PShapes:



Ah cool - will do, thanks

I sense Hype is a faux pas : / oops

I’ll check out PShapes - thanks again

1 Like