CODEWITHSUNDEEP
svg
georgmierau
georgmierau

Reputation: 157

SVG — radial gradient with a smooth edged cutout

I'm trying to create a SVG background image like this (two colors, radial gradient, S-shape cutout with smooth edges):

enter image description here

It's quite easy to create a radial gradient (e.g. using this tool):

<!-- SVG syntax --> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<radialGradient id="g920" gradientUnits="userSpaceOnUse" cx="5.408560311284047%" cy="0%" r="93.04166277718278%">
<stop stop-color="#ed1c24" offset="0.1"/><stop stop-color="#003663" offset="1"/>
</radialGradient>
<rect x="-50" y="-50" width="101" height="101" fill="url(#g920)" />
</svg>

but is it possible to add the cutout too?

Upvotes: 0

Views: 1290

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101830

Lennis' answer was close. But you would get better results by combining the fill and the filter in one element, rather than try to use a blurry white shape to hide part of the gradient.

Note that the blur will affect any edge of the shape, including the top, left and right. So you need to make sure those edges are well away from (outside of) the edge of the SVG viewport.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
      <stop stop-color="#ed1c24" offset="0.1"/>
      <stop stop-color="#003663" offset="0.8"/>
    </radialGradient>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
    </filter>	
  </defs>
  <path id="svg_1" d="M -0.5,-0.5
                      L 1.5,-0.5
                      L 1.5,0.5
                      L 1,0.5
                      C 1,0 0.6,0.1 0.5,0.25
                      C 0.4,0.4 0.1,0.4 0,0.25
                      L -0.5,0.25
                      Z"
        fill="url(#g)" filter="url(#f1)"/>
</svg>

Upvotes: 1

Lemnis
Lemnis

Reputation: 482

You could use a blur on a white element to make it look like a cutout.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
      <stop stop-color="#ed1c24" offset="0.1"/>
      <stop stop-color="#003663" offset="1"/>
    </radialGradient>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
    </filter>	
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
  <path id="svg_1" fill="white" d="m-0.1,0.5 l0,0.55l1.15,0l0,-0.53495c0,0 -0.1,-0.1 -0.5,0c-0.3,0.1 -0.5,0 -0.5,0l-0.1,0z" filter="url(#f1)"/>
</svg>

You could also try a meshgradient, it's in the svg 2.0 spec. At the moment no browser supports it that I know off.

Upvotes: 1

Related Questions