Question 45670 in CSS Question posted in
Some basic documentation can be found here.

How to apply conic gradient to svg stroke? – CSS

Is any idea how it can be done?

Expecting this:enter image description here

https://codesandbox.io/s/how-to-apply-conic-gradient-to-svg-stroke-cbx37l

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search