import * as d3 from "d3"

export const animatedBezier = (svgElement: SVGElement) => {
    const svg = d3.select(svgElement);

    

    const path = d3.path();
        path.moveTo(100, 100);
        path.bezierCurveTo(10, 10, 20, 20, 30, 30);


    const group = svg.append('g')
        .attr('transform', `translate(400, 400)`)

    group.append('text').text('HELLO!!');

    const arcGenerator = d3.arc()
            .innerRadius(0)
            .outerRadius(40);

    // Draw Full circle for shadow anchor
    group.append('path').attr('d', arcGenerator({
        startAngle: 0,
        endAngle: 2  * Math.PI
    } as d3.DefaultArcObject)
    )
    .attr('fill', 'white');

    group.append('path')
        .style("stroke-dasharray", ("3, 3"))  // <== This line here!!
        .attr("d", 'M1.83697019872103e-15,-30A30,30,0,1,1,-17.39920700962875,-24.439058808311046L0,0Z')
        .style('fill', 'red');
}