Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

svg fixes

+16 -11
+8 -10
demo/flex-size/flex-size.js
··· 4 4 var isSpinning = true; 5 5 var TAU = Zdog.TAU; 6 6 7 + var model = new Zdog.Anchor(); 8 + 7 9 var canvasIllo = new Zdog.Illustration({ 8 10 element: 'canvas', 9 11 zoom: zoom, 10 12 resize: true, 11 - dragRotate: true, 13 + dragRotate: model, 12 14 onDragStart: function() { 13 15 isSpinning = false; 14 16 }, ··· 20 22 var svgIllo = new Zdog.Illustration({ 21 23 element: 'svg', 22 24 zoom: zoom, 23 - dragRotate: true, 25 + dragRotate: model, 24 26 onDragStart: function() { 25 27 isSpinning = false; 26 28 }, 27 29 }); 28 30 29 31 // ----- model ----- // 30 - 31 - var model = new Zdog.Anchor({ 32 - addTo: canvasIllo, 33 - }); 34 32 35 33 new Zdog.Rect({ 36 34 width: 20, ··· 76 74 // ----- animate ----- // 77 75 78 76 function animate() { 79 - svgIllo.rotate.y += isSpinning ? +TAU/150 : 0; 80 - canvasIllo.rotate.y += isSpinning ? +TAU/150 : 0; 81 - svgIllo.updateRenderGraph(); 82 - canvasIllo.updateRenderGraph(); 77 + model.rotate.y += isSpinning ? +TAU/150 : 0; 78 + model.updateGraph(); 79 + svgIllo.renderGraph( model ); 80 + canvasIllo.renderGraph( model ); 83 81 requestAnimationFrame( animate ); 84 82 } 85 83
+2
demo/patties/index.html
··· 25 25 margin: 0px auto 20px; 26 26 cursor: move; 27 27 } 28 + 29 + svg.illo { max-width: 600px; } 28 30 </style> 29 31 30 32 </head>
+3
demo/strutter/index.html
··· 25 25 margin: 0px auto 20px; 26 26 cursor: move; 27 27 } 28 + 29 + svg.illo { max-width: 600px; } 28 30 </style> 29 31 30 32 </head> ··· 35 37 </div> 36 38 37 39 <script src="../../js/utils.js"></script> 40 + <script src="../../js/canvas-renderer.js"></script> 38 41 <script src="../../js/svg-renderer.js"></script> 39 42 <script src="../../js/vector.js"></script> 40 43 <script src="../../js/anchor.js"></script>
+3 -1
demo/template/index.html
··· 25 25 margin: 0px auto 20px; 26 26 cursor: move; 27 27 } 28 + 29 + svg.illo { max-width: 600px; } 28 30 </style> 29 31 30 32 </head> 31 33 <body> 32 34 33 35 <div class="container"> 34 - <svg class="illo"></svg> 36 + <canvas class="illo"></canvas> 35 37 </div> 36 38 37 39 <script src="../../js/utils.js"></script>