Clip Paths over Text

This is a garish exploration of clip paths.

///////////////////////////////////
///////// Rectangles //////////////
chart.append("clipPath")
        .attr("id", "rect-clip")
        .append("rect")
        .attr("height", height)
        .attr("width", width)
        .attr("x", 0)
        .attr("y", chartHeight * .39)
        .attr("transform", "rotate(10)")

    chart.append("rect")
        .attr("height", chartHeight)
        .attr("width", chartWidth)
        .attr("x", margin.left)
        .attr("y", margin.top)
        .attr("fill", "#F6CB4C")

    chart.append("rect")
        .attr("height", chartHeight)
        .attr("width", chartWidth)
        .attr("x", margin.left)
        .attr("y", margin.top)
        .attr("clip-path", "url(#rect-clip)")
        .attr("fill", "#FF9E97")

///////////////////////////////////
///////// Text ////////////////////

    let myText = "xiphoid"
    let fontSize = chartWidth * .25
    chart.append("clipPath")
        .attr("id", "text-clip")
        .append("text")
        .attr("x", chartWidth * .5)
        .attr("y", chartHeight * .5)
        .text(myText)
        .attr("text-anchor", "middle")
        .attr("font-size", fontSize)
        .attr("font-weight", "bold")

    chart.append("text")
        .attr("x", chartWidth * .5)
        .attr("y", chartHeight * .5)
        .text(myText)
        .attr("text-anchor", "middle")
        .attr("font-size", fontSize)
        .attr("font-weight", "bold")
        .attr("fill", "#115035")

    chart.append("text")
        .attr("x", chartWidth * .5)
        .attr("y", chartHeight * .5)
        .text(myText)
        .attr("text-anchor", "middle")
        .attr("font-size", fontSize)
        .attr("font-weight", "bold")
        .attr("clip-path", "url(#rect-clip)")
        .attr("fill", "#9E0A0A")