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

**URL:** <https://discourse.processing.org/t/making-svgs-get-bigger-the-further-from-the-center-of-the-canvas-they-are/41200>\
**Category:** Coding Questions\
**Created:** [March 8, 2023, 6:15pm UTC](https://discourse.processing.org/t/making-svgs-get-bigger-the-further-from-the-center-of-the-canvas-they-are/41200 "2023-03-08T18:15:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Noobcessing](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Noobcessing](https://discourse.processing.org/u/Noobcessing)\
**Post date:** [March 8, 2023, 6:15pm UTC](https://discourse.processing.org/t/making-svgs-get-bigger-the-further-from-the-center-of-the-canvas-they-are/41200/1 "2023-03-08T18:15:34Z")

</div>

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);
pool.autoAddToStage()
	.add(new HShape("svg2.svg"))

	.layout(
		new HGridLayout()
		.startX(50)
		.startY(50)
		.spacing(50,50)
		.cols(11)
	)

	.onCreate(
		new HCallback() {
			public void run(Object obj) {
				HShape d = (HShape) obj;
				d
		.stroke(#808080)
        .fill(#FFFFFF)
        .size( (int)random(50,60) )
        .rotate( (int)random(360) )
        .loc( (int)random(width), (int)random(height) )
        .anchorAt(H.CENTER)
				;
			
			}
		}
	)
	.requestAll()
;

H.drawStage();

```

}

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [March 8, 2023, 7:08pm UTC](https://discourse.processing.org/t/making-svgs-get-bigger-the-further-from-the-center-of-the-canvas-they-are/41200/2 "2023-03-08T19:08:29Z")

</div>

Hi @Noobcessing,

A warm welcome to the forum!

Unfortunately I’ve never checked out the [Hype Library](https://github.com/hype/HYPE_Processing) so can’t help on that approach…

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Noobcessing](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Noobcessing](https://discourse.processing.org/u/Noobcessing)\
**Post date:** [March 8, 2023, 7:10pm UTC](https://discourse.processing.org/t/making-svgs-get-bigger-the-further-from-the-center-of-the-canvas-they-are/41200/3 "2023-03-08T19:10:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 8, 2023, 7:53pm UTC](https://discourse.processing.org/t/making-svgs-get-bigger-the-further-from-the-center-of-the-canvas-they-are/41200/4 "2023-03-08T19:53:58Z")

</div>

Hello @Noobcessing,

I suggest you peruse the resources here:  
[https://processing.org/](https://processing.org/)

Consider using PShapes.

Tutorial on PShapes:  
[https://processing.org/tutorials/pshape](https://processing.org/tutorials/pshape)

`:)`

---

<div class="post-metadata">

**Author:** ![Noobcessing](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Noobcessing](https://discourse.processing.org/u/Noobcessing)\
**Post date:** [March 8, 2023, 8:03pm UTC](https://discourse.processing.org/t/making-svgs-get-bigger-the-further-from-the-center-of-the-canvas-they-are/41200/5 "2023-03-08T20:03:28Z")

</div>

Ah cool - will do, thanks

I sense Hype is a faux pas : / oops

I’ll check out PShapes - thanks again