Circle
new Zdog.Ellipse
Triangle
new Zdog.Shape
Square
new Zdog.Rect
Plus
new Zdog.Rect
Circle
new Zdog.Ellipse
Triangle
new Zdog.Shape
Square
new Zdog.Rect
Plus
new Zdog.Rect
new Zdog.Ellipse
Circle
Set diameter for perfect circles.
1
2
3
4
5
6
7
8
9
10
11
12
13
// create circle1
let circle1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add circle1
new Zdog.Ellipse({
addTo: circle1,
diameter: 80,
stroke: 20,
color: '#f97d81',
});
Ellipse
Set width and height for ellipses.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// create circle1
let circle1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add circle1
new Zdog.Ellipse({
addTo: circle1,
width: 80,
height: 60,
stroke: 20,
color: '#f97d81',
});
Semi-circle
Set quarters to an integer for quarter- and semi-circles. The quarter circle starts in the upper-right and continues clockwise.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// create semicircle1
let semicircle1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add semicircle1
new Zdog.Ellipse({
addTo: semicircle1,
diamter: 80,
quarters: 2,
stroke: 20,
color: '#f97d81',
});
new Zdog.Shape
Triangle
Shape class for custom shapes. The 'shape' of a Shape is defined by its path.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// create triangle1
let triangle1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add triangle1
new Zdog.Shape({
addTo: triangle1,
path: [ // triangle
{ x: 0, y: -100 },
{ x: 100, y: 100 },
{ x: -100, y: 100 },
],
stroke: 30,
color: '#f97d81'
});
new Zdog.Rect
Square
Set size with width and height.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// create square1
let square1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add square1
new Zdog.Rect({
addTo: square1,
width: 160,
height: 160,
stroke: 30,
color: '#f9d08b',
fill: false,
});
Rounded Rect
A rectangle or square with rounded corners. Set size with width and height. Set rounded corner radius with cornerRadius.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// create square1
let square1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add square1
new Zdog.Rect({
addTo: square1,
width: 160,
height: 100,
cornerRadius: 40,
stroke: 30,
color: '#f9d08b',
fill: false,
});
new Zdog.Rect
Plus
Set size with width / height and stroke. Set shape fill with fill:true.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// create plus1
let plus1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add plus1a
new Zdog.Rect({
addTo: plus1,
width: 160,
height: 0,
stroke: 30,
color: '#b2de81',
fill: true,
});
// add plus1b
new Zdog.Rect({
addTo: plus1,
width: 0,
height: 160,
stroke: 30,
color: '#b2de81',
fill: true,
});
Zdog Integration
Setup
Zdog is a designer-friendly pseudo-3D engine for canvas & SVG.
Polygonal 3D engines rely on meshes of polygons to depict volume, Zdog shapes can show volume with stroke. Using stroke for volume is what makes Zdog different.
Add the Zdog JavaScript files inside <Head> tag.
1
2
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="zdog-demo.js"></script>
Zdog is rendered on a <canvas> or <svg> element. Set width and height attributes to set the size.
Inside an Embed Element (</>):
1
<canvas class="class-name" width="80" height="80"></canvas>
Add the Zdog 'initial static' demo code to the before <body> tag.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
// zdog-demo.js
// create circle1
let circle1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
});
// add circle1
new Zdog.Ellipse({
addTo: circle1,
diameter: 80,
stroke: 20,
color: '#f97d81',
});
// update and render
circle1.updateRenderGraph();
</script>
Animating
To animate the scene we need to re-render circle1 every frame.
1
2
3
4
5
6
7
8
9
function animate() {
// rotate illo each frame
circle1.rotate.y += 0.03;
circle1.updateRenderGraph();
// animate next frame
requestAnimationFrame( animate );
}
// start animation
animate();
So we wrap circle1.updateRenderGraph() within a requestAnimationFrame loop. Now we can manipulate the scene and see its changes animated. We change the rotation of the scene by incrementally increasing circle1.rotate.y.
Drag Rotate
Enable rotation with dragging by setting dragRotate:true on the Illustration.
1
2
3
4
5
6
let circle1 = new Zdog.Illustration({
// set canvas with selector
element: '.class-name',
// enable rotating scene with dragging
dragRotate: true,
});