<template>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(50 50) scale(0.8)">
      <g transform="scale(0.527294 0.527294)">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="0.8;0.5;0.8" keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
        <rect x="-45" y="-45" width="90" height="90" fill="rgba(0, 174, 236, 0)" stroke="#1abcf6" stroke-width="8" stroke-linejoin="round" rx="38.3194" ry="38.3194" transform="rotate(245.435)">
          <animate attributeName="rx" repeatCount="indefinite" dur="1s" values="0;50;0" keyTimes="0;0.5;1"></animate>
          <animate attributeName="ry" repeatCount="indefinite" dur="1s" values="0;50;0" keyTimes="0;0.5;1"></animate>
          <animate attributeName="stroke-width" repeatCount="indefinite" dur="1s" values="8;12.8;8" keyTimes="0;0.5;1"></animate>
          <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 0 0;270 0 0;540 0 0" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
        </rect>
      </g>
    </g>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: [String, Number],
      default: 120
    }
  }
}
</script>
