ZCubes Render Examples
ZCubes Render feature allows users to make fascinatingly complex drawings and animations by simply using the spreadsheet, array or table features.
Rectangle
RENDER(
[
["type","x","y","width","height","fill","stroke"],
["rect",50,20,150,150,"blue","red"]
]
);
""
Rounded Rectangle
RENDER(
[
["type","x","y","rx","ry","width","height","fill","stroke","stroke-width"],
["rect",50,20,20,20,150,150,"purple","green",5]
]
);
""
Line
RENDER(
[
["type","x1","y1","x2","y2","stroke","stroke-width"],
["line",0,0,200,200,"blue",5]
]
);
""
Circle
RENDER(
[
["type","cx","cy","r","stroke","stroke-width","fill"],
["circle",250,250,50,"green",5,"blue"]
]
);
""
Gradient Polygon
RENDER(
[
["type","points","stroke","stroke-width","fill"],
["polygon",[220,10 300,210 170,250 123,234,100,200,140],"red",5,["green","blue","lime"]]
]
);
""
Evenodd fill Star
RENDER(
[
["type","points","stroke","stroke-width","fill","fill-rule"],
["polygon",[100,10 40,198 190,78 10,78 160,198],"orange",5,["lime"],"evenodd"]
]
);
""
Nonzero fill Star
RENDER(
[
["type","points","stroke","stroke-width","fill","fill-rule"],
["polygon",[100,10 40,198 190,78 10,78 160,198],"orange",5,["lime"],"nonzero"]
]
);
""
Combined ellipses with dash lined stroke
RENDER(
[
["type","cx","cy", "rx", "ry","fill","stroke","stroke-dasharray"],
["ellipse",200,50,180,20,"yellow","black","5,5"],
["ellipse",180,50,140,15,"white"]
]
);
""
Path
1.
RENDER(
[
["type" , "size" , "coordinates" , "stroke" , "stroke-width" , "label"],
["path",,"M 100 350 l 150 -300","red",5,"TEST PATH"],
["path",,"M 250 50 l 150 300","red",5,],
["path",,"M 175 200 l 150 0","red",5,]
]
);
""
2.
RENDER(
[
["type" , "size" , "coordinates" , "stroke" , "stroke-width" , "label"],
["path",,"M 100 350 l 150 -300","red",5,"TEST PATH"],
["path",,"M 250 50 l 150 300","red",5,],
["path",,"M 175 200 l 150 0","red",5,],
["path",,"M 100 350 q 150 -300 300 0","blue",5,]
]
);
""
Left Indent Image
RENDER
(
[
["type","coordinates","stroke","stroke-width"],
["line",[3,3,48,3],"blue",5],
["line",[3,19,65,19],"green",5],
["line",[3,35,48,35],"blue",5],
["line",[3,51,65,51],"green",5]
]
);
""
Alert icon
RENDER
(
[
["type","cx","cy","rx","ry","coordinates","fill","stroke","stroke-width"],
["ellipse",43,43,40,40,,"yellow","black",5],
["ellipse",43,65,5,5,,"black","black",5],
["line",,,,,[43,19,43,48],"black","black",8]
]
);
""
Play icon
RENDER
(
[
["type","cx","cy","rx","ry","coordinates","points","fill","stroke","stroke-width"],
["ellipse",43,43,40,40,,,"black","black",5],
["polygon",,,,,,[35 23, 60 43, 35 63],"red","white",2]
]
);
""
Bezier Curves
RENDER
(
[
["type","coordinates","fill","stroke","stroke-width"],
["path", "M 70 10 C 70 20, 110 20, 110 10","transparent","black",5],
["path", "M 10 10 C 20 20, 40 20, 50 10","transparent","black",5],
["path", "M 130 10 C 120 20, 180 20, 170 10","transparent","black",5],
["path", "M 10 60 C 20 80, 40 80, 50 60","transparent","black",5],
["path", "M 70 60 C 70 80, 110 80, 110 60","transparent","black",5],
["path", "M 130 60 C 120 80, 180 80, 170 60","transparent","black",5],
["path", "M 10 110 C 20 140, 40 140, 50 110","transparent","black",5],
["path", "M 70 110 C 70 140, 110 140, 110 110","transparent","black",5],
["path", "M 130 110 C 120 140, 180 140, 170 110","transparent","black",5]
]
);
""
Curve and Curved Text
RENDER
(
[
["type","coordinates","fill","stroke","stroke-width","label"],
["path", "M 15 15 C 50, 40 80, 30 100,10","transparent","black",5],
["textpath", "M 20 20 C 65, 50 90, 40 110,20","transparent","blue",2,"This is a curve"]
]
);
""
Rectangles in a line
RENDER(
[
["type","x","y","width","height","fill","count"],
["rect",i=>i*20, i=>100, 100,50,"red",12]
]
)
""
Elliptical Arcs
RENDER
(
[
["type","coordinates","fill","stroke","stroke-width"],
["path","M150,150 a100,100 0 0,0 100,100 z","red","black",4],
["path","M150,150 a100,100 0 0,0 -100,100 z","green","black",4],
["path","M150,150 a100,100 0 0,0 -100,-100 z","blue","black",4],
["path","M150,150 a100,100 0 0,0 100,-100 z","yellow","black",4]
]);
""
Polyline-Strokes styles
RENDER
(
[
["type","points""stroke","stroke-width","stroke-linecap","fill","stroke-linejoin"],
["polyline","40 60 80 20 120 60","black",20,"butt","none","miter"],
["polyline","40 140 80 100 120 140","black",20,"round","none","round"],
["polyline","40 220 80 180 120 220","black",20,"square","none","bevel"]
]
);
""
fill types: radial, reflect, Pad
RENDER(
[
["type","x","y","width","height","fill"],
["rect",100,70,200,140,["yellow","red","pink","reflect"]],
["rect",150,100,100,70,["white","pink","green","radial"]]
]
)
""
Fill type: Pad
RENDER(
[
["type","x","y","width","height","fill"],
["rect",100,70,200,140,["reflect","yellow","green","pad"]],
]
)
""
Circle with spokes
RENDER(
[
["type","coordinates","fill","stroke","stroke-width"],
["path","M100 100 a75 75 0 1 1 150 0 a75 75 0 1 1 -150 0","none", ["blue","green","yellow"],10],
["line",[115,65,225,150],"none","red",5],
["line",[235,65,123,150],"none","red",5],
["line",[105,110,245,110],"none","red",5],
["line",[175,30,175,172],"none","red",5]
]
);
""
Text rotation and font Styles
RENDER
([
["type","coordinates","size","stroke","transform","label","font-style","font-family"],
["text",[100,100],"Rotated text","red",{rotation:30},"Straight text","italic","Arial Black Bold"],
["text",[200,100],"HELLO","lime",{rotation:-90}]
]
);
""
Polygons with fill styles
RENDER(
[
["type","width","height","stroke","points","fill"],
["rect",300,100,"green"],
["polygon",,,"red","0,100 50,25 50,75 100,0"],
["polygon",,,"red","100,100 150,25 150,75 200,0",["black","white","black","white"]],
["polygon",,,"red","200,100 250,25 250,75 300,0",["green","yellow","pink"]]
]);
""
Text with Font Styles, Font Size and dasharray
RENDER(
[
["type","coordinates","size","stroke","stroke-dasharray","font-size","stroke-width","font-style","font-family"],
["text",[200,100],"TEXT",["green","red","blue"],"10,3","100",5],
["text",[200,300],"styles",["black","orange"],"10,3","70",3,"italic","script"]
]);
""
Microsoft logo using ‘group/class’ in the code
mygroup=RENDER(
[
["id","type","coordinates","width","height","fill","stroke","stroke-width"],
["","rect",[0,100],100,100,"#01a6f0","white",4],
["","rect",[100,0],100,100,"#7fbc00","white",4]
]
);
RENDER(
[
["type","coordinates","width","height","fill","stroke","stroke-width"],
["rect",[0,0],100,100,"#f34f1c","white",4],
["rect",[100,100],100,100,"#ffb900","white",4]
],
mygroup
)
""
Pencil Drawing
RENDER(
[
["type","x","y","width","height","points","fill","coordinates","label","transform"],
["rect",100,70,50,500,,["yellow","lightblue"]],
["polygon", ,,,,[100 70, 150 70, 120 10],"grey"],
["text",,,,,,,[80,250],"Apsara Pencil",{rotation:90}]
]
);
""
Cherries
RENDER(
[
["type","width","height","points","class","fill","stroke","stroke-width","stroke-linecap","stroke-linejoin", "coordinates"],
["rect","215","274",[0,0,215,274]],
["path",,,,"stems","none","#7AA20D",8,"round","round","M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498"],
["path",,,,"leaf","#7AA20D","#7AA20D",4,"round","round","M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20.031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z"],
["path",,,,"r-cherry","#ED6E46","#ED6E46",12,,,"M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478 C155.46,191.738,159.715,193.485,164.836,193.136z"],
["path",,,,"l-cherry","#ED6E46","#ED6E46",12,,,"M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z"]
]
);
""
Spiral
RENDER(
[
["type","coordinates","fill","stroke","stroke-width"],
["path","M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274","white","red",2]
]
);
""
Inserting an image
RENDER(
[
["type","x","y","width","height","fill"],
["rect",90,65,200,200,"https://developer.mozilla.org/static/img/favicon144.png"]
]);
""
Lotto Ball No. 1
RENDER(
[
["type","cx", "cy", "r","coordinates","label","fill","stroke","stroke-width","font-size"],
["circle",100,100,60,,,"purple","purple"],
["circle",100,100,30,,,"white","white"],
["text",,,,[90,65],"1",,"black",3,40]
]);
""
Lotto Ball No. 2
RENDER(
[
["type","cx", "cy", "r","coordinates","label","fill","stroke","stroke-width","font-size"],
["circle",100,100,60,,,"red","red"],
["circle",100,100,30,,,"white","white"],
["text",,,,[90,65],"2",,"black",3,40]
]);
""
Lotto Ball No. 10
RENDER(
[
["type","cx", "cy", "r","coordinates","label","fill","stroke","stroke-width","font-size"],
["circle",100,100,60,,,"#ff5E8A","#ff5E8A"],
["circle",100,100,30,,,"white","white"],
["text",,,,[90,65],"10",,"black",3,40]
]);
""
