Create an irregular matrix of triangles SVG.JS

Question

I have been experimenting with a library named SVG.JS, which is wonderful and powerful.

I want to fill all the screen with irregular polygons but I don't know how to make them fill all the screen, independently of the size of it. How could I do it?

And finally, could I make this irregular polygon design with illustrator and then with SVG.JS import it and manipulate them?

http://jsfiddle.net/Vac2Q/3669/

/* create an svg drawing */
var draw = SVG('drawing')

/* draw rectangle */

var polygon = draw.polygon('0,0 100,50 50,100').fill('#f09')
var polygon = draw.polygon('0,0 50,100 0,200').fill('#f04')
var polygon = draw.polygon('100,50 50,100 0,200').fill('#g09')

Please show what you have so far – Lee Taylor Jun 22 '14 at 15:20 — Lee Taylor, Jun 22 '14 at 15:20

score 1 · Answer 1 · answered Jul 20 '14 at 10:41

Here is the example of BigBadaboom for svg.js (more or less):

/* create an svg drawing */
var draw = SVG('drawing').size('100%', '100%')

/* draw shapes */
var group = draw.group()
group.polygon('0,0 100,50 50,100').fill('#f09')
group.polygon('0,0 50,100 0,200').fill('#f04')
group.polygon('100,50 50,100 0,200').fill('#g09')

/* set viewbox */
draw.viewbox(group.bbox()).attr('preserveAspectRatio', 'none')

And here is the updated fiddle:

http://jsfiddle.net/Vac2Q/3912/

score 0 · Answer 2 · answered Jun 22 '14 at 16:01

Well you basically have two options.

(1) Use JS to determine the size of your page/screen and make an SVG whose size matches that.

<svg width="1600" height="1024">
    ...etc...
</svg>

(2) Pick a default page size (eg. 1000x1000) and set your viewBox to that. Then set your width and height to "100%", and your preserveAspectRatio to "none".

<svg width="100%" height="100%"
     viewBox="0 0 1000 1000" preserveAspectRatio="none">
    ...etc...
</svg>

This second option will give you a "drawing area" of 1000x1000 and will automatically stretch that area to fill the width and height of your parent object (ie your page). However you may not want the diagram to be stretched that way.

I haven't used SVGjs, so I'll leave you to work out the API calls involved.

Create an irregular matrix of triangles SVG.JS

2 Answers2