Menu
I am trying to create a background that consists of multiple dots gradienting from say green to yellow from left to right. So they idea was to create a path, fill it with a gradient and clip path with a pattern:
https://codepen.io/Deka87/pen/pLPqJE?editors=1000
<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="green"></circle>
</pattern>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" fill="url(#img-dotted-gradient)" clip-path="url(#img-dotted-dots)"></path>
</svg>
The gradient works OK, the clip path works OK (standalone). However they don't come together. Any help would be appreciated!
656
SVG Linear Gradient - <linearGradient>. The <linearGradient> element is used to define a linear gradient. The <linearGradient> element must be nested within a <defs> tag. The <defs> tag is short for definitions and contains definition of special elements (such as gradients).
SVG also allows text to be used as a clipping path. Here I’ve kept the group that contains the circle and triangle, but changed the clipPath to a text element. Here’s the result and you can see the text allows part of the circle and part of the triangle to show through. The second ‘p’ in Clipping reveals a little of both shapes.
You can see the triangle (the polygon) is clipped, but the circle isn’t. SVG also allows text to be used as a clipping path. Here I’ve kept the group that contains the circle and triangle, but changed the clipPath to a text element.
A mask consists of a shape or image where each pixel has varying degrees of transparency and opaqueness that can peer through, or hide portions in a very subtle fashion. Now let’s discuss some elements and attributes which enable clipping and masking in SVG. An SVG clipPath accepts many attributes and content model types.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
