neko-custom/client/src/components/avatar.vue

<template>
  <!--
      <img :src="`https://ui-avatars.com/api/?name=${seed}&size=${size}`" />
  -->
  <div class="avatar" :style="{
    width: size + 'px',
    height: size + 'px',
    lineHeight: size + 'px',
    fontSize: (size/2) + 'px',
    backgroundColor: Background(seed),
  }">
    {{ seed.substring(0, 2).toUpperCase() }}
  </div>
</template>

<style lang="scss" scoped>
  .avatar {
    user-select: none;
    text-align: center;
    background: white;
    color: black;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
  }
</style>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'

  @Component({
    name: 'neko-avatar',
  })
  export default class extends Vue {
    @Prop(String) readonly seed: string | undefined;
    @Prop(Number) readonly size: number | undefined;

    Background(seed: string) {
      let a = 0, b = 0, c = 0;
      for(let i = 0; i < seed.length; i++) {
        a += seed.charCodeAt(i) * 3;
        b += seed.charCodeAt(i) * 5;
        c += seed.charCodeAt(i) * 7;
      }

      let x = Math.floor(128 + (a % 128));
      let y = Math.floor(128 + (b % 128));
      let z = Math.floor(128 + (c % 128));
      return "rgb(" + x + "," + y + "," + z + ")";
    }
  }
</script>