SVG - How do I cut a <path> in half?

To cut a <path> in half, you can use the <rect> element and the width and height properties to define the size of the rectangle and then position it over the <path> element. Here's an example:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="25" y="25" width="50" height="50" fill="none" stroke="black" stroke-width="1"/>
  <path d="M50,50 Q75,75 100,50 Q125,75 150,50 Q175,75 200,50" fill="none" stroke="black" stroke-width="1"/>
</svg>

In this example, the <rect> element is positioned at (25, 25) and has a width and height of 50x50. It is filled with none, has a black border with a width of 1, and is positioned absolute to allow it to cut into the <path> element. The <path> element is positioned at (50, 50) and has a M command moving the starting point to (50, 50) and a Q command for the first quadratic curve to (75, 75) and a Q command for the second quadratic curve to (100, 50) and a Q command for the third quadratic curve to (125, 75) and a Q command for the fourth quadratic curve to (150, 50) and a Q command for the fifth quadratic curve to (175, 75) and a Q command for the sixth quadratic curve to (200, 50). All of these commands have a fill and stroke property set to none and a stroke-width of 1.