SVG rounded triangle with gradient overlay and background image - css

Question

I have the below code that is creating a simple rounded triangle shape with a purple gradient. I'm trying to insert a background image that will fill the shape underneath the gradient to create a similar effect to the screenshot below:
What I'm looking to achieve:
My code so far (doesn't show the image):
<svg width="100%" viewBox="0 0 1440 742" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
</pattern>
<path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
</defs>
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowledge-base-article">
<g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
<use xlink:href="#img1"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg>

Answer 1

I would go with a pure CSS solution using some transformation like below
.container {
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
}
.container > div {
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
}
.container > div:before {
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
}
<div class="container">
<div></div>
</div>
With the container as full width:
.container {
margin:auto;
position:relative;
overflow:hidden;
}
.container > div {
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
}
.container > div:before {
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
}
<div class="container">
<div></div>
</div>

Answer 2

Use the <path> as a <mask>. Then use that <mask> on a your <image>, then use that same <mask> on a <rect> that sits on top. Finally fill the <rect> with your <gradient>.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>