vue-zdog

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <link href="//unpkg.com/tachyons" rel="stylesheet">
    <script src="//unpkg.com/vue"></script>
    <script src="//unpkg.com/zdog/dist/zdog.dist.min.js"></script>
    <script src="//unpkg.com/vue-zdog@0.0.3"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div class="flex items-center justify-center vh-100">
        <div id="app"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>



const { ZIllustration, ZPolygon, ZAnchor } = VueZDog
new Vue({
  components: {
    ZIllustration, 
    ZPolygon
  },
  data: () => ({
    rotation: 0,
  }),
  methods: { 
    onTick() { 
      this.rotation += 0.03
    }
  },
  render(h) {
    const vueLogo = [h(ZPolygon, {
      props: {
        radius: 100,
        sides: 3,
        rotate: {
          x: Zdog.TAU / 2,
        },
        color: '#41B883',
        fill: true,
        stroke: 0,
      }
    }), h(ZPolygon, {
      props: {
        radius: 100,
        sides: 3,
        rotate: {
          x: Zdog.TAU / 2,
        },
        color: '#fff',
        stroke: 2,
      }
    }), h(ZPolygon, {
      props: {
        radius: 40,
        sides: 3,
        rotate: {
          x: Zdog.TAU / 2,
        },
        translate: { 
          z: 10, 
          y: -30
        },
        color: '#34495E',
        fill: true,
        stroke: 0,
      }
    }), h(ZPolygon, {
      props: {
        radius: 40,
        sides: 3,
        rotate: {
          x: Zdog.TAU / 2,
        },
        translate: { 
          z: -10,
          y: -30
        },
        color: '#34495E',
        fill: true,
        stroke: 0,
      }
    })]
    const anchor = h(ZAnchor, {
      props: {
        rotate: { 
          y: this.rotation
        }
      },
    }, vueLogo)
    return h(ZIllustration, { 
      props: {
        zoom: 1.5,
        resize: 'fullscreen'
      },
      staticClass: "w-100 h-100",
      on: {
        tick: this.onTick
      } 
    }, [anchor])
  }
}).$mount('#app')

/* Styles go here */

body { 
  background: linear-gradient(to bottom, #41B783, #527972);
}