<div id="app">

  <div class="root">

    <pre><span v-for="(item, index) in texts">{{item + '\n'}}</span></pre>

  </div>

</div>

​

html {

  background: black;

  color: #eee;

}

​

.root {

  position: fixed;

  height: 100%;;

  width: 100%;

  display: flex;

  justify-content: space-around;

  align-items: center;

}

​

@media screen and (max-width: 800px) {

  .root {

    transform: scale(0.5)

  }

}

function dist(x1, y1, x2, y2) {

  return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))

}

​

function angle(x1, y1, x2, y2) {

  return Math.atan2(y1 - y2, x2 - x1);

}

​

new Vue({

  el: '#app',

  data: {

    width: 40,

    height: 40,

    background: ' ',

    items: [

      {

        type: "partial-circle",

        x: 20,

        y: 20,

        ri: 15,

        ro: 17,

        style: "/",

        angleOffset: 0,

        angleRange: Math.PI / 2,

        angleStep: -0.1

      },

      {

        type: "circle",

        x: 30,

        y: 30,

        ri: 15,

        ro: 17,

        rTeeth: 2,

        teeth: 16,

        style: ".",

        angleOffset: 0,

        angleStep: 0.2

      },

      {

        type: "circle",

        x: 20,

        y: 20,

        ri: 9,

        ro: 11,

        rTeeth: 2,

        teeth: 6,

        style: "#",

        angleOffset: 0,

        angleStep: 0.05

      },

      {

        type: "circle",

        x: 3,

        y: 3,

        ri: 9,

        ro: 11,

        rTeeth: 2,

        teeth: 6,

        style: "*",

        angleOffset: 0,

        angleStep: -0.05

      }

    ]

  },

  computed: {

    texts() {

      var texts = []

      for (let y = 0; y < this.height; y++) {

        for (let x = 0; x < this.width * 2; x++) {

          texts[y] = texts[y] || []

          texts[y].push(this.background)

        }

      }

      this.items.forEach((item)=>{

        for (let y = 0; y < this.height; y++) {

          for (let x_ = 0; x_ < this.width * 2; x_++) {

            const x = x_ / 2;

            switch (item.type) {

              case "partial-circle":

                var length = dist(x, y, item.x, item.y)

                var sita = angle(x, y, item.x, item.y)

                var formattedAita = (sita - item.angleOffset + Math.PI * 2) % (Math.PI * 2)

                if (length >= item.ri && length < item.ro && formattedAita > item.angleRange) {

                  texts[y][x_] = item.style

                }

                break;

              case "circle":

                var length = dist(x, y, item.x, item.y)

                var sita = angle(x, y, item.x, item.y)

                var extralength = (Math.cos(sita * item.teeth + item.angleOffset) + 1) / 2 * item.rTeeth

                if (length >= item.ri && length < item.ro + extralength) {

                  texts[y][x_] = item.style

                }

                break;

            }

          }

        }

      })

      return texts.map(l=>l.join(''))

    }

  },

  mounted() {

    var self = this;

      let prev = null;

    requestAnimationFrame(function tick(current) {

      prev = prev || current

      var stepFactor = (current - prev) / 16.6

      for (let item of self.items) {

        switch (item.type) {

          case "circle":

            item.angleOffset += item.angleStep * stepFactor

            break;

          case "partial-circle":

            item.angleOffset += item.angleStep * stepFactor

            break;

        }

        prev = current

      }

      requestAnimationFrame(tick)

    })

  }

})