SVG渐变色

Question

Hi I'm working with SVG here I trying to add the gradient to SVG like this

white and grey gradient but I unable to achieve the desired output. Can anyone point me in the right direction.

 <svg viewBox="0 0 400 400"> <defs> <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat"> <stop offset="0.05" stop-color="#fff" stop-opacity="0"/> <stop offset="1" stop-color="#777" stop-opacity="1"/> </linearGradient> </defs> <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" /> </svg>

 <svg viewBox="0 0 700 700" class="bubble-svg"> <defs> <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat" gradientTransform="rotate(170)"> <stop offset="0%" stop-color="#fff" stop-opacity="0"/> <stop offset="10%" stop-color="#bdbdbd" stop-opacity="0.5"/> <stop offset="20%" stop-color="#fff" stop-opacity="0"/> <stop offset="30%" stop-color="#bdbdbd" stop-opacity="0.5"/> <stop offset="40%" stop-color="#fff" stop-opacity="0"/> <stop offset="50%" stop-color="#bdbdbd" stop-opacity="1"/> <stop offset="60%" stop-color="#fff" stop-opacity="0"/> <stop offset="70%" stop-color="#bdbdbd" stop-opacity="0.5"/> <stop offset="80%" stop-color="#bdbdbd" stop-opacity="0"/> <stop offset="100%" stop-color="#fbfbfb" stop-opacity="0.5"/> </linearGradient> </defs> <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" /> </svg>

Answer 1

Fine-tuning the rendering of shades of gray and white colors depends on which video card, browser and operating system you are using.

Therefore, I am sending several options. You can use any option that you prefer or slightly adjust for yourself by changing the colors.

 <svg viewBox="0 0 700 700" class="bubble-svg"> <defs> <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)"> <stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/> <stop offset="17%" stop-color="#fff" stop-opacity="0.8"/> <stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/> <stop offset="49%" stop-color="#fff" stop-opacity="0.8"/> <stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/> <stop offset="80%" stop-color="#fff" stop-opacity="0.8"/> <stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/> </linearGradient> </defs> <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" /> </svg>

2# variant

 <svg viewBox="0 0 700 700" class="bubble-svg"> <defs> <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)"> <stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/> <stop offset="17%" stop-color="#F6F6F6" stop-opacity="0.8"/> <stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/> <stop offset="49%" stop-color="#F6F6F6" stop-opacity="0.8"/> <stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/> <stop offset="80%" stop-color="#F6F6F6" stop-opacity="0.8"/> <stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/> </linearGradient> </defs> <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" /> </svg>

3# variant

 <svg viewBox="0 0 700 700" class="bubble-svg"> <defs> <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)"> <stop offset="0%" stop-color="#ABABAC" stop-opacity="1"/> <stop offset="17%" stop-color="#fff" stop-opacity="0.8"/> <stop offset="30%" stop-color="#ABABAC" stop-opacity="0.6"/> <stop offset="49%" stop-color="#fff" stop-opacity="0.8"/> <stop offset="61%" stop-color="#ABABAC" stop-opacity="0.6"/> <stop offset="80%" stop-color="#fff" stop-opacity="0.8"/> <stop offset="95%" stop-color="#ABABAC" stop-opacity="1"/> </linearGradient> </defs> <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" /> </svg>

For a more precise adjustment to your taste, it is better to use stop-color and stop-opacity choosing values.

Update

For the method spreadMethod ="repeat" to start working in your example, you need to reduce the gradient coverage by three times. To do this, set x1 ="0" y1 ="0" x2 ="0" y2 ="0.33"
As a result, adjusting the color tones of one wave, we get completely identical copies of it, which facilitates the process compared to the option of a large number of stop-offset

 <svg viewBox="0 0 700 700" class="bubble-svg"> <defs> <linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="0.33" spreadMethod="repeat" gradientTransform="rotate(170)"> <stop offset="10%" stop-color="#ABABAC" stop-opacity="1"/> <stop offset="50%" stop-color="#ffffff" stop-opacity="0.8"/> <stop offset="85%" stop-color="#ABABAC" stop-opacity="1"/> </linearGradient> </defs> <circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" /> </svg>