How to apply conic gradient to svg stroke? - css

Question

Is any idea how it can be done?
Expecting this:
https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l

Answer 1

The basic idea here is that four rectangles that have there own linear gradient are masked off by a dotted stroke. The gradients overlap overlap each other in the corners so it looks like a continues gradient.
The dotted stroke in mask m1 has rounded line caps and then another mask (m2) is masking off half of the stroke.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"
width="500">
<defs>
<linearGradient id="top">
<stop offset="10%" stop-color="DarkViolet"/>
<stop offset="90%" stop-color="DeepSkyBlue"/>
</linearGradient>
<linearGradient id="right" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="DeepSkyBlue"/>
<stop offset="50%" stop-color="Green"/>
<stop offset="90%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="bottom">
<stop offset="10%" stop-color="Red"/>
<stop offset="50%" stop-color="Orange"/>
<stop offset="90%" stop-color="Yellow"/>
</linearGradient>
<linearGradient id="left" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="DarkViolet"/>
<stop offset="90%" stop-color="Red"/>
</linearGradient>
<mask id="m1">
<rect x="4" y="4" rx="20" width="392" height="292"
mask="url(#m2)" stroke="white" stroke-width="8"
stroke-dasharray="5 5 10 5 7 4" stroke-linecap="round"
pathLength="400" filter="url(#distort)" />
</mask>
<mask id="m2">
<rect x="4" y="4" rx="20" width="392" height="292" fill="white" />
</mask>
</defs>
<g mask="url(#m1)">
<rect width="400" height="20" fill="url(#top)"/>
<rect width="20" height="300" x="380" fill="url(#right)"/>
<rect width="400" height="20" y="280" fill="url(#bottom)"/>
<rect width="20" height="300" fill="url(#left)"/>
</g>
</svg>

Answer 2

I was able to implement it with pattern image.
https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l