金曜GUI 0403

gui-0403.markdown

金曜GUI 0403

A Pen by hashrock on CodePen.

License.

index.html

<div id="app">
  <svg width="600" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(100,100) scale(0.8)">
      <deno></deno>
    </g>
    <g transform="translate(400,200) scale(0.5)">
      <deno :init="10"></deno>
    </g>

    <text text-anchor="middle" font-size="30" :x="230 + 40 * idx" :y="460 + y(idx)" fill="white" stroke-width=10 stroke="#F44" stroke-linejoin="round" v-for="(c, idx) in letters">
      {{c}}
    </text>

  </svg>
</div>
<script type="text/x-template" id="deno">
  <g :transform="t">
      <foot :angle="f3" x=240 y=240></foot>
      <foot :angle="f4" x=110 y=240></foot>

      <path fill-rule="evenodd" clip-rule="evenodd" d="M68.0276 87.3448C64.7703 87.7755 61.4197 88 58 88C25.9675 88 0 68.3005 0 44C0 19.6995 25.9675 0 58 0C89.7683 0 115.571 19.3759 115.995 43.3997C121.809 66.2281 130.323 97.8532 138.951 126.338C141.796 135.729 147.067 146.055 151.775 155.276L151.775 155.277C154.369 160.357 156.792 165.103 158.543 169.172C168.93 178.138 181.891 180 218 180C276.032 180 323.936 210.239 331.08 249.354C334.433 256.946 337.632 267.516 341 282C351 325 380 333.5 391 335C373.5 336 344.5 334.5 337.5 323.5C334.136 318.214 326.962 306.461 320.416 294.458C301.866 320.838 262.974 339 218 339C155.04 339 104 303.407 104 259.5V225.5C104 216.526 101.606 200.388 99.5958 188.758C99.5348 188.595 99.4738 188.432 99.4128 188.269C99.3816 188.186 99.3505 188.102 99.3193 188.018C94.4859 175.049 81.9595 135.372 77 119C73.0288 105.89 70.2772 96.0014 68.0276 87.3448Z" fill="#A4DD90" />
      <circle cx="71" cy="28" r="6" fill="black" />

      <foot :angle="f1" x=120 y=250 :front="true"></foot>
      <foot :angle="f2" x=260 y=250 :front="true"></foot>
    </g>
</script>

<script type="text/x-template" id="foot">
  <g :transform="t1" transform-origin="30 20">
      <path  d="M0.159461 23.5C-1.34054 9 7.65946 0.5 30.6595 0C67.6595 4.5 59.1595 37.5 59.1595 56.5C59.1595 75.5 50.8261 95.3333 45.6595 107.5H16.6595C2.65945 98 1.65946 38 0.159461 23.5Z" :fill="front ? '#A4DD90' : '#94CD70'" />
    </g>
</script>

script.js

Vue.component("foot", {
  template: "#foot",
  props: ["angle", "x", "y", "front"],
  computed: {
    t1() {
      return `translate(${this.x}, ${this.y}) rotate(${this.angle})`;
    }
  }
});
const amp = 10;

Vue.component("deno", {
  template: "#deno",
  props: ["init"],
  data() {
    return {
      d: 0
    };
  },
  computed: {
    f1() {
      return Math.sin(this.d / 2 / 3.14) * amp;
    },
    f2() {
      return Math.sin(this.d / 2 / 3.14 + 3.14 + 1) * amp;
    },
    f3() {
      return Math.sin(this.d / 2 / 3.14 + 1) * amp;
    },
    f4() {
      return Math.sin(this.d / 2 / 3.14 + 3.14) * amp;
    },
    z() {
      return -Math.abs(Math.sin(this.d / 2 / 3.14) * amp);
    },
    x() {
      return Math.sin(this.d / 4 / 3.14) * 20;
    },
    t() {
      return `translate(${this.x},${this.z})`;
    }
  },
  mounted() {
    this.d = this.init ? this.init : 0;
    setInterval(() => {
      this.d += 1;
    }, 20);
  }
});

new Vue({
  el: "#app",
  data: {
    t: 0,
    letters: ["L", "O", "A", "D", "I", "N", "G"]
  },
  methods: {
    y(rad) {
      return Math.sin((rad * 10 + this.t) * 0.03 * 3.14) * 10;
    }
  },
  mounted() {
    setInterval(() => {
      this.t += 1;
    }, 20);
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

style.css

body {
  background: #fefeef;
}