<template>
  <div class="bg">
    <!-- <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" fill="transparent" width="400" height="300"
      class="bgColor">
      <polygon :fill="bgColor" points="10, 27 10, 273 13, 276 13, 279 24, 289
    38, 289 41, 292 73, 292 75, 290 81, 290
    85, 294 315, 294 319, 290 325, 290
    327, 292 359, 292 362, 289
    376, 289 387, 279 387, 276
    390, 273 390, 27 387, 25 387, 21
    376, 11 362, 11 359, 8 327, 8 325, 10
    319, 10 315, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"></polygon>
    </svg> -->
    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
      class="top-left">
      <polygon
        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
    </svg>
    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
      class="top-right">
      <polygon
        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
    </svg>
    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
      class="bottom-left">
      <polygon
        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
    </svg>
    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
      class="bottom-right">
      <polygon
        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
        :fill="mainColor">
        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
        </animate>
      </polygon>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'widget-div-1',
  props: {
    mainColor: {
      type: String,
      default: "#83bff6",
    },
    secondaryColor: {
      type: String,
      default: "#00CED1",
    },
    // bgColor: {
    //   type: String,
    //   default: "transparent",
    // },
  },
  computed: {
    valuesArr() {
      return [`${this.mainColor};${this.secondaryColor};${this.mainColor};`,
      `${this.secondaryColor};${this.mainColor};${this.secondaryColor};`,
      `${this.mainColor};${this.secondaryColor};transparent;`];
    }
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  position: relative;

  svg {
    position: absolute;
    width: 6em;
    height: 6em;
  }

  .bgColor {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .top-left {
    top: 0;
    left: 0;
  }

  .top-right {
    top: 0;
    right: 0;
    transform: rotateY(180deg);
  }

  .bottom-left {
    left: 0;
    bottom: 0;
    transform: rotateX(180deg);
  }

  .bottom-right {
    bottom: 0;
    right: 0;
    transform: rotateX(180deg) rotateY(180deg);
  }
}
</style>