<template>
    <div class="circle-wave">
        <svg class="svg" width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <!-- Wave -->
            <g id="wave">
                <path id="wave-2" :fill="color" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
                    <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
                </path>
            </g>
            <text text-anchor="middle" font-size="42px" transform="translate(100,120)" :style="{fill: props.textColor}">{{ props.value }}%</text>
            <circle cx="100" cy="100" r="96" stroke-width="6" stroke="rgba(255,255,255,0.5)" fill="transparent"></circle>
            <circle cx="100" cy="100" r="98" stroke-width="2" :stroke="color" fill="none" class="percentage-pie-svg"></circle>
        </svg>
    </div>
</template>

<script setup>
import {ref, defineProps} from 'vue';
const props = defineProps({
    color: {
        type: String,
        default: 'blue'
    },
    textColor: {
        type: String,
        default: 'white'
    },
    value: {
        type: Number,
        default: 0
    }
})
const color = ref(props.color);

</script>
<style lang="stylus" scoped>
.circle-wave
    .svg
        opacity 0.8
        filter drop-shadow(0 0 5px v-bind(color))
</style>