How to create a circular arc (sector) with a backg

I am looking for a way to draw a circle sector given an angle. I want this sector to show an (1:1) image as its background (Only the part of the squared dimension image that is beneath the sector).

Essentially, the image will have the same width and height. The image's width and height will be equal to the diameter of the circle whose sector will be shown. I want the image as well as the sector to maintain their aspect ratios but be responsive. I need their sizes to be in percentages or something similar and not pixels so they are responsive to page size changes. I have tried using SVG paths to try to accomplish this but so far I have failed to completely produce what I intend to.

The first thing I tried to do was set the background image of the SVG I was making. I referred to this fiddle: http://jsfiddle.net/9zkfodwp/1/ and finally ended up trying the answer in this post: Fill SVG path element with a background-image Next, I tried to find a way to make a circular sector given an angle and found an amazing answer here: How to calculate the SVG Path for an arc (of a circle) However, this answer did not use a background image so now merging both things together did not work out for me. I ended up with this

Things to note here: The picture's dimensions are not equal to the diameter and the picture is getting repeated as well. Plus, here the SVG and path sizes are different and I want the SVG to be equal to the background picture's size and the inside path to have its diameter to be equal to the dimensions of the squared SVG.

The code is below:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);
  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");
  return d;
}
window.onload = function() {
  document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 359.99));
};

<svg width="600" height="600">
        <defs>
            <pattern id="imgpattern" x="0" y="0" width="1" height="1">
                <image width="300" height="300"
                       xlink:href="https://146c4de20826c5857a80-8e5c4ea3a7a874d38c0915883796d18e.ssl.cf2.rackcdn.com/product-hugerect-669768-163734-1461140647-16fe8eceec8ee6c425577133b2b557b1.jpg" />
            </pattern>
        </defs>
        <path id="arc1" fill="none" stroke="url(#imgpattern)" stroke-width="90" />
    </svg>

I want a result like this Please ignore the issues with this because I used MS Paint to draw this. So here, I want only the blue part to be visible. The blue part is the area of the background image (which is the square) that is visible through the sector. I don't want the sector to have any borders nor the image. I don't want the image to be repeated either. Lastly, if the answer is an SVG, I want the path to fit into the SVG completely because often, the answers I have seen result in the SVG to be bigger than the path. I want the SVG to be equal to the (squared) background image.

I Will consider two of my previous answers¹ in order to do this with clip-path. The trick is simple, we make the image rounded then we apply clip-path to show/hide the needed part.

Here is a basic example:

.box {
  width:150px;
  height:150px;
  background:url(https://picsum.photos/id/1003/300/300) center/cover;

  clip-path:polygon(50% 50%,0 0,   0 50%);
  border-radius:50%;
}

<div class="box">
</div>

You can also consider animation:

.box {
  width:150px;
  height:150px;
  background:url(https://picsum.photos/id/1003/300/300) center/cover;

  border-radius:50%;
  clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
  animation:change 2s linear forwards;
}

@keyframes change {
  25% {
    clip-path:polygon(50% 50%,0 0,   0 100%,0 100%,0 100%,0 100%);
  }
  50% {
    clip-path:polygon(50% 50%,0 0,0 100%,   100% 100%, 100% 100%,100% 100%);
  }
  75% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%,    100% 0,100% 0);
  }
  100% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,     0% 0%);
  }
}

<div class="box">
</div>

¹ Related answers to get more details about the calculation and to easily adjust the clip-path like you want:

https://stackoverflow.com/a/56728104/8620333

https://stackoverflow.com/a/56799618/8620333

In the near future we can consider conic-gradient() and mask-image to easily do this.

The below works only on Chrome

.box {
  width:150px;
  height:150px;
  background:url(https://picsum.photos/id/1003/300/300) center/cover;

  
  -webkit-mask-image:conic-gradient(from 90deg, #fff 60deg,transparent 60deg);
  mask-image:conic-gradient(from 90deg, #fff 60deg,transparent 60deg);
  border-radius:50%;
}

<div class="box">
</div>

As you can see, we simply define the starting point (from) then the degree the sector should fill (the white color)

Update

Based on another answer where I am creating a pie chart (https://stackoverflow.com/a/52205730/8620333) we can improve the previous method using mask-image and linear-gradient to have better support

From 0% to 50%:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  background:url(https://picsum.photos/id/1024/400/400) center/cover;
  clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  -webkit-mask:
    linear-gradient(var(--v), transparent 50%, #fff 0);
}

<p>The formula is [x = (5/18) * p + 25]. <small>Where x is the percentage and p the degree</small></p>
<div class="box" style="--v:-90deg;"></div>
<div class="box" style="--v:-30deg;"></div>
<div class="box" style="--v:0deg;"></div>
<div class="box" style="--v:60deg;"></div>
<div class="box" style="--v:90deg;"></div>

from 50% to 100%:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  background:url(https://picsum.photos/id/1024/400/400) center/cover;
  -webkit-mask:
    linear-gradient(var(--v), #fff 50%,transparent 0),
    linear-gradient(to right, transparent 50%,#fff 0);
}

<p>The formula is [x = (5/18) * p + 75]. <small>Where x is the percentage and p the degree</small></p>
<div class="box" style="--v:-90deg;"></div>
<div class="box" style="--v:-30deg;"></div>
<div class="box" style="--v:0deg;"></div>
<div class="box" style="--v:60deg;"></div>
<div class="box" style="--v:90deg;"></div>