https://github.com/oriane212/zdog-ui

Web app for creating animated illustrations with 3D JavaScript engine Zdog
https://github.com/oriane212/zdog-ui

canvas codejar highlight-js javascript react-material-ui reactjs zdog

Last synced: about 2 months ago
JSON representation

Web app for creating animated illustrations with 3D JavaScript engine Zdog

• Host: GitHub
• URL: https://github.com/oriane212/zdog-ui
• Owner: oriane212
• License: mit
• Created: 2021-01-12T20:30:13.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-17T22:20:20.000Z (almost 3 years ago)
• Last Synced: 2024-08-02T13:33:15.180Z (5 months ago)
• Topics: canvas, codejar, highlight-js, javascript, react-material-ui, reactjs, zdog
• Language: JavaScript
• Homepage: https://oriane212.github.io/zdog-ui/.
• Size: 24.9 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Zdog UI

A real-time editor for creating simple 3D web illustrations using [Zdog](https://zzz.dog/) (a pseudo-3D JavaScript engine for canvas and SVG).

## How to use

Go to [Zdog UI](https://oriane212.github.io/zdog-ui/) web app (desktop only). 

Use UI controls to add shapes, edit shape and canvas properties, and add animation.

Grab the code snippets (HTML and JavaScript) generated for your Zdog illustration!

## Features

### Canvas

- dimensions

- fallback text

- background color

### Zdog Illustration

- Rotate (x, y, z)

- Drag Rotate

- Animate (continuous spin, ease in/out)

### Zdog Shape classes

- Box

- Cone

- Cylinder

- Ellipse

- Hemisphere

- Polygon

- Rectangle

- Rounded Rectangle

- Group

### Zdog Shape properties

- Fill

- Faces (color and visibility)

- Stroke

- Translate (x, y, z)

- Rotate (x, y, z)

- Dimensions (width, height, depth, length, radius, diameter)

- Sides

## In progress

### More Zdog API to support:

- SVG Illustration

- Anchor

- Shape

- Zoom

- Scale

- Centered

- OnDrag

### UI features

- Copy/duplicate shape layers

- Edit shape layer name

- More customizable animation

- Customizable onDrag