{"id":292135,"date":"2019-07-24T11:04:45","date_gmt":"2019-07-24T18:04:45","guid":{"rendered":"http:\/\/css-tricks.com\/?p=292135"},"modified":"2019-07-24T11:04:45","modified_gmt":"2019-07-24T18:04:45","slug":"zdog","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/zdog\/","title":{"rendered":"Zdog"},"content":{"rendered":"

David DeSandro has loads of super cool JavaScript libraries<\/a> he’s created over the years. His latest is Zdog<\/a>, a “round, flat, designer-friendly pseudo-3D engine for canvas & SVG.” It’s only been about a month<\/a> since he dropped it (although, like any good library, it’s been simmering<\/a>) and it has been pretty incredible to watch it capture the imagination of loads of designers and developers. <\/p>\n

<\/p>\n

I’m shouting out Zdog here because I think it’s worth y’all checking out. There is something about the API and how easy it becomes to draw in a 3D space that is clicking with folks. It might just click with you! Having a little moment like that is what web dev is all about ;).<\/p>\n

\n See the Pen
\n Zdog Spaceship<\/a> by Ryan Mulligan (@hexagoncircle<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

The Official Site<\/a><\/h3>\n
\"\"<\/a><\/figure>\n

(And GitHub repo.)<\/a><\/p>\n

\n See the Pen
\n Ztocat<\/a> by Jessica Paoli (@skullface<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

CodePen Collections<\/h3>\n

Here is a collection from Dave<\/a> that gathers community-built examples:<\/p>\n

\"\"<\/a><\/figure>\n

And here’s is a Collection from Dave himself<\/a> of demos he created while building the library. <\/p>\n

\n See the Pen
\n Zdog and Goo<\/a> by Chris Gannon (@chrisgannon<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

There is a lot of cool stuff all around the web with Zdog, like this idea of plotting data with it<\/a> from Zach:<\/p>\n

\"\"<\/figure>\n

Plus a font!!<\/a><\/p>\n

\n See the Pen
\n Zfont Advanced Demo<\/a> by James Daniel (@rakujira<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

CodePen Topic<\/h3>\n

We created a Topic on CodePen<\/a> to help explore the library and find examples as well. <\/p>\n

\"\"<\/figure>\n

We also covered it over on the CodePen Blog<\/a> when the library dropped because it was so dang exciting. <\/p>\n

(By the way, if you have a good idea for a “Topic” on CodePen, let me know! The main thing we need is a good strong Collection of “starter” Pens to help people understand concepts and use the library, plus a Collection of strong, complete examples. I have some cool swag and stuff I could send your way if you’re into the idea of helping.)<\/p>\n","protected":false},"excerpt":{"rendered":"

David DeSandro has loads of super cool JavaScript libraries he’s created over the years. His latest is Zdog, a “round, flat, designer-friendly pseudo-3D engine for canvas & SVG.” It’s only been about a month since he dropped it (although, like any good library, it’s been simmering) and it has been pretty incredible to watch it […]<\/p>\n","protected":false},"author":3,"featured_media":292957,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[833,707,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/zdog-1.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":9523,"url":"https:\/\/css-tricks.com\/animated-3d-objects-without-svg-or-canvas\/","url_meta":{"origin":292135,"position":0},"title":"Animated 3D Objects Without SVG or Canvas","date":"May 24, 2011","format":false,"excerpt":"One of the ways you can make a triangle with CSS is by using a 45-degree angle gradient on an element that goes from from colored to transparent with an hard split at the half-way point. Then you can use CSS3 stuff like translate, rotate and skew on them to\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321292,"url":"https:\/\/css-tricks.com\/ztext-js\/","url_meta":{"origin":292135,"position":1},"title":"ztext.js","date":"September 22, 2020","format":false,"excerpt":"Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It's reminiscent of Zdog, but for type. It works its magic by stacking a bunch of copies of the glyphs on top of each other\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-18-at-2.03.32-PM.png?fit=1200%2C357&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297707,"url":"https:\/\/css-tricks.com\/when-to-use-svg-vs-when-to-use-canvas\/","url_meta":{"origin":292135,"position":2},"title":"When to Use SVG vs. When to Use Canvas","date":"November 12, 2019","format":false,"excerpt":"SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear. A little flat-color icon? That's\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/svg-canvas.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":208224,"url":"https:\/\/css-tricks.com\/write-svg-a-postcss-plugin\/","url_meta":{"origin":292135,"position":3},"title":"Write SVG: a PostCSS plugin","date":"September 17, 2015","format":false,"excerpt":"Here\u2019s a cool PostCSS plugin that lets us write SVG directly in CSS with the rest of our styles: .arrow { @svg { polygon { fill: green; points: 50,100 0,0 0,100; } } } These values will then be converted into a data URI, like so: .arrow { background-image: url(data:image\/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22green%22%20points%3D%2250%2C100%200%2C0%200%2C100%22%2F%3E%3C%2Fsvg%3E)\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326069,"url":"https:\/\/css-tricks.com\/graphery-svg\/","url_meta":{"origin":292135,"position":4},"title":"Graphery SVG","date":"November 23, 2020","format":false,"excerpt":"I've compared SVG and Canvas before. If you're trying to decide between them, read that. I'd say the #1 difference between them is vector (SVG) versus raster (Canvas). But the #2 difference is how you work with them. SVG is declarative, as in, literal elements that express what they are\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/graphery.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":245253,"url":"https:\/\/css-tricks.com\/slicing-svg-9-ways\/","url_meta":{"origin":292135,"position":5},"title":"Slicing SVG 9 Ways","date":"September 6, 2016","format":false,"excerpt":"Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well: The shadow may need to move around or fade, so we need a solution that we can animate with transforms & opacity, since they can be handed off to the GPU. It\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/zdog-1.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292135"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=292135"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292135\/revisions"}],"predecessor-version":[{"id":292958,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292135\/revisions\/292958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/292957"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=292135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=292135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=292135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}