Svg Pattern and Gradient Together

How do I mix pattern and gradient into one path?

One solution is to create a new <pattern> that combines both the gradient and the original pattern.

<svg id="svg" viewBox="0 0 1000 1000">    <defs>        <linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" >            <stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" />            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />        </linearGradient>        <pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse">            <circle fill="0x0" cx="3" cy="3" r="2.5"></circle>        </pattern>
        <pattern id="both" width="100%" height="100%">           <rect width="100%" height="100%" fill="url(#grad)"/>           <rect width="100%" height="100%" fill="url(#bg)"/>        </pattern>    </defs>  <g>    <path id="path3" d="M0,0 1000,0 1000,1000 0,1000z"  fill="url(#both)"></path>  </g></svg>

Combine clipPath, pattern, and linearGradient in SVG

Only the shape of the elements in a <clipPath> matter. The colour and fill are ignored, so you can't do it that way.

But you can use a <mask> instead.

<svg width='100' height='100' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>    <linearGradient id="img-dotted-gradient">      <stop offset="0%" stop-color="green"></stop>      <stop offset="100%" stop-color="yellow"></stop>    </linearGradient>    <pattern id="img-dotted-dots" x="0" y="0" width=".1" height=".1">      <circle cx="2" cy="2" r="2" fill="white"></circle>    </pattern>    <mask id="img-dotted-mask">      <rect width="100" height="100" fill="url(#img-dotted-dots)"/>    </mask>  </defs>  <path d="M0 0 H 100 V 100 H 0 Z" fill="url(#img-dotted-gradient)" mask="url(#img-dotted-mask)"></path></svg>

SVG Pattern with Gradient and Smooth Tile Transitions

a. Is there any way to apply a gradient to the entire pattern, perhaps by wrapping it in another SVG?

Every copy of a pattern tile will be identical. If you need a gradient to cover the whole document, then it would need to be a separate element.

b. How do I get rid of the display of rounded corners between the overlapping tiles, except for the top tile, which does not overlap another tile? Can the z-index of the tiles or the tile stacking order be changed?

The tiles in a pattern never overlap each other. Your pattern tiles are specified to be 300x176. Anything outside that region will not be rendered. However the path that you are using in your tile is 200x200. So 24 units of the bottom of the path are being clipped off (200-176). That is the reason why the bottom rounded corners are not showing.

If you want the whole of the path to be visible, then it needs to be no bigger than 300x176.

If you need your tiles to actually overlap, then patterns are not useful to you. You would need to draw all the tiles yourself. As per your Illustrator experiment you mentioned.

In the following example, I've changed the pattern dimensions to match the area that the path covers (200x200).

* {
  margin:0;
  padding:0;
}

body{
  background-color:tomato;
}

.gradient-1{
  color: white;
}

<svg width="100%" height="99.5vh">
 <defs>
   <pattern id="cc_vert_tiles-1" x="" y="" width="200" height="200" patternUnits="userSpaceOnUse" fill="url(#SVGID_1_)">
     <use href="#cp_3_ring_rnd4_uneq_1_" />
   </pattern>  
   
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100.0005" y1="200" x2="100.0005" y2="4.882813e-004">
    <stop  offset="0.0443" style="stop-color:#FFFF00"/>
    <stop  offset="0.1669" style="stop-color:#FFFD00"/>
    <stop  offset="0.2387" style="stop-color:#FFF400"/>
    <stop  offset="0.2975" style="stop-color:#FFE600"/>
    <stop  offset="0.3491" style="stop-color:#FFD200"/>
    <stop  offset="0.3961" style="stop-color:#FFB800"/>
    <stop  offset="0.4392" style="stop-color:#FF9900"/>
    <stop  offset="0.468" style="stop-color:#FF7F00"/>
    <stop  offset="0.5948" style="stop-color:#BC7F00"/>
    <stop  offset="0.7949" style="stop-color:#587F00"/>
    <stop  offset="0.9343" style="stop-color:#197F00"/>
    <stop  offset="1" style="stop-color:#007F00"/>
</linearGradient>
   <path id="cp_3_ring_rnd4_uneq_1_" d="M200,190c0,5.522-4.478,10-10,10H10c-5.523,0-10-4.478-10-10V10C0,4.477,4.477,0,10,0h180
    c5.522,0,10,4.477,10,10V190z M5,99.621c0,52.467,42.533,95,95,95c52.467,0,95-42.533,95-95c0-52.467-42.533-95-95-95
    C47.533,4.621,5,47.154,5,99.621z"/>
 </defs>
 <g class="gradient-1">
 <rect id="cc_vert_pat-1" width="200" height="110vh" fill="url(#cc_vert_tiles-1)" />
   </g>
</svg>

Fill SVG element with a repeating linear gradient color

http://jsfiddle.net/mcab43nd/1/ - solution is here

Thanks to Lars and AmeliaBR

Here is the code

<svg>

<defs>
   <linearGradient id="Gradient-1"x1="3%" y1="4%" x2="6%" y2="6%">
     <stop offset="0%" stop-color= "red" />
     <stop offset="50%" stop-color= "white" />
   </linearGradient>

   <linearGradient id="repeat"xlink:href="#Gradient-1"spreadMethod="repeat" />
</defs>

<rect x="30" y="10"
      width="200" height="100"
      fill= "url(#repeat)"
      stroke="red"
      stroke-width="2px" />
</svg>

How to create svg gradient with 3 points set out in a triangle that blend together

This topic is inspired by the answer @Paul LeBeau

The author of the question did not ask a question on animation. But I think that the options will be useful to someone.

Gradient rotation

An animation command is added for a group of elements:

circle cx="50" cy="50" r="5" fill="white" stroke="silver">
     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/>
   </circle>

<style>svg {  width: 400px;}</style><svg viewBox="0 0 100 100">  <defs>    <filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">      <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>    </filter>     <mask id="circle">      <circle cx="50" cy="50" r="50" fill="white">       </circle>    </mask>  </defs>  <g id="gr1" mask="url(#circle)" filter="url(#blur)">    <rect x="-10" width="110" height="110" fill="blue"/>    <rect x="50" width="60" height="110" fill="yellow"/>    <polygon points="50,50, 60,110, 40,110" fill="#0f8"/>    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>    <polygon points="0,10, 50,50, 0,30" fill="#f0f"/>    <polygon points="100,10, 100,30, 50,50" fill="#f80"/>  </g>   <circle cx="50" cy="50" r="5" fill="white" stroke="silver">     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/>   </circle>        </svg>

How to use SVG clipPath with Pattern via CSS clip-path property?

The only things that are valid inside a clip path are:

Shape elements (‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’)
‘text’
‘use’

Plus you can use animation elements etc to animate the clip path. However, only the shapes of those elements are used. Effects such as patterns, filters, etc are ignored.

The only way you could get the effect you want to work as a clipping path would be to add numerous <circle> elements to your <clipPath>.

<clipPath>
   <circle>
   <circle>
   <circle>
   <circle>
   ... etc ...
</clipPath>

But you could use a mask instead. Masks allow patterns.

.figure {  width: 300px;  height: 300px;  -webkit-mask: url(#img-dotted-mask);          mask: url(#img-dotted-mask);  background-color: #1063B1;}

<p>This only works in Firefox</p>
<div class="figure"></div>
<svg width="0" height="0">  <defs>    <pattern id="img-dotted-pattern"      viewBox="0 0 1 1"      patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">      <rect width="1" height="1" fill="black"/>      <circle cx="0.5" cy="0.5" fill="white" r="0.15"></circle>    </pattern>
    <mask id="img-dotted-mask">      <rect width="2000" height="2000" fill="url(#img-dotted-pattern)"/>    </mask>  </defs></svg>

Is there a way to use a SVG gradient as input to a displacement map?

Radial gradients applied to text.

.container {width:100%;height:100%;}#txt1 {font-size: 200px;font-weight:bold;font-family: 'Signika', sans-serif;fill:url(#rg);}

<div class="container"><svg viewBox="0 0 750 300"    xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">                       <defs>      <radialGradient id="rg" r=".9">              <stop offset="0%" stop-color="#f00"></stop>              <stop offset="10%" stop-color="#000"></stop>              <stop offset="20%" stop-color="#f00"></stop>              <stop offset="30%" stop-color="#000"></stop>              <stop offset="40%" stop-color="#f00"></stop>              <stop offset="50%" stop-color="#000"></stop>              <stop offset="60%" stop-color="#f00"></stop>              <stop offset="70%" stop-color="#000"></stop>              <stop offset="80%" stop-color="#f00"></stop>              <stop offset="90%" stop-color="#000"></stop>              <stop offset="100%" stop-color="#f00"></stop>            </radialGradient>    </defs>    <text id="txt1" x="15%" y="75%"  >Stack</text>  </svg>  </div>