Develop Reference

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

I'm trying to generate a gradient that I could use as a feDisplacementMap to distort text in SVG. How do I need to set it?
I've tried creating it as part of the SVG, and hiding the gradient, but am unable to make it work this way.
<svg
filter="url(#f)"
overflow="auto"
viewBox="0,0,200vw,200vh"
width="100%"
height="100vh"
>
<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>
<filter id="f" primitiveUnits="objectBoundingBox">
<feImage result="pict2" xlink:href="#witness"></feImage>
<feDisplacementMap
scale=".05"
xChannelSelector="R"
yChannelSelector="R"
in2="pict2"
in="SourceGraphic"
></feDisplacementMap>
</filter>
<pattern id="imageFill" width="1" height="1" viewBox="0 0 300 300">
<image id="ripples" width="300" height="300" xlink:href="" />
</pattern>
</defs>
<text height="100vh" text-anchor="middle" class="svgText">
<tspan height="100vh" x="50%" y="50%">text</tspan>
</text>
<rect
id="witness"
width="100%"
height="100%"
stroke="none"
opacity="0"
fill="url(#rg)"
/>
</svg>
I would like to be able to distort the text with the generated gradient while keeping it hidden. Thanks so much for your time and help :).

In order to make it work you will need to use a data uri for the feImage. I'm using your gradient but the filter you use has a way to small scale. I'm using scale="15"
<svg width="300" height="300">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="300">
<feImage xlink:href="data:image/svg+xml;utf8,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E %3CradialGradient id='rg' r='.7'%3E %3Cstop offset='0%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='10%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='20%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='30%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='40%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='50%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='60%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='70%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='80%25' stop-color='%23f00'%3E%3C/stop%3E%3Cstop offset='90%25' stop-color='%23000'%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%23f00'%3E%3C/stop%3E% %3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23rg)' width='300' height='300'%3E%3C/rect%3E%3C/svg%3E" result="pict2"/>
<feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="R" in2="pict2" in="SourceGraphic"/>
</filter>
</defs>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="300" width="300" filter="url(#f)" />
</svg>
Also in your code you have several mistakes:
1. The viewBox attribute can't take units. This won't do: viewBox="0,0,200vw,200vh"
2. Also you can't do this: <text height="100vh" or this: <tspan height="100vh" however you can give your text a font-size.

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>
Add filters feTurbulence andfeDisplacementMap
By changing the values of the baseFrequency andscale filter attributes you can get interesting effects
Below is an example of a text distortion animation with gradients:
The animation starts when you hover the text begin =" txt1.mouseover "
the animation ends - end =" txt1.mouseout ", or at the end of the animation time - dur =" 18s "
#txt1 {
font-size: 200px;
font-weight:bold;
font-family: 'Signika', sans-serif;
fill:url(#rg);
filter:url(#myFilter);
}
<div class="container">
<svg width="750" height="300" version="1.1"
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>
<filter id="myFilter" >
<feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
<animate attributeName="baseFrequency"
dur="18s"
values="0.0001;0.02;0.0001;0.02;0.0001"
begin="txt1.mouseover"
end="txt1.mouseout" />
</feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
</filter>
</defs>
<text id="txt1" x="1%" y="50%" >Stack</text>
</div>
An example of animating image and text distortion
.container {
width:75%;
height:75%;
}
#txt1 {
font-size: 100px;
font-weight:bold;
font-family: 'Signika', sans-serif;
fill:url(#rg);
filter:url(#myFilter);
pointer-events:none;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 300">
<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>
<filter id="myFilter" >
<feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
<animate attributeName="baseFrequency" dur="18s" values="0.0001;0.02;0.0001;0.02;0.0001" begin="img1.mouseover" end="img1.mouseout" />
</feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
</filter>
</defs>
<image id="img1" xlink:href="https://i.stack.imgur.com/hHGO8.jpg" width="100%" height="100%" filter="url(#myFilter)" />
<text id="txt1" x="35%" y="35%" >Stack</text>
</svg>
</div>

Speaking from my experience with Firefox, the only input allowed as in2 in displacement map filter primitives is the output of the feturbulence element. So you'd have to create a gradient using feturbulence as a source. For a linear gradient going from left to right, from color r1, g1, b1 to r2, g2, b2 and filling the space from 0,0 to 100,100, you'd have to create xn feturbulence outputs, where xn may be any number, but the larger it is, the smoother the gradient will be.
Every n:th feturbulence output, then have to have it's color channels altered using fecolormatrix as follows: c = c1 * (1 - n/xn) + c2 * (n/xn), where c is the channel value, of the specific output, c1 is the starting value of the channel, and c2 is the ending value. And the height must be set to 100 for each element, and the width to 100/xn, and the x-position to n/xn*100. Then use femergenode to bring all these outputs together into one output, that can then be used as in2 in fedisplacementmap.

How to change stroke-width without changing inner radius of the circle [duplicate]

This question already has answers here:
Can you control how an SVG's stroke-width is drawn?
(13 answers)
Closed 3 years ago.
I need to change stroke-width dynamically and I need to keep inner radius of the circle unchangeable.
<g fill="none" :stroke-width="brightness * 60" ...
How can I achieve that effect ?
svg that I use is below. I want to create rainbow circle and the width of the circle has to be changed depending on the chosen brightness.
The width changes correctly but I would like to keep inner radius unchangeable.
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-35 -35 270 270">
<defs>
<linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff0000" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#ffff00" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffff00" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#00ff00" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#00ff00" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#00ffff" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#00ffff" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#0000ff" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#0000ff" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#ff00ff" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
<stop offset="0%" stop-color="#ff00ff" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#ff0000" :stop-opacity="saturation"/>
</linearGradient>
</defs>
<g fill="none" :stroke-width="brightness * 60" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
</g>
<circle cx="100" cy="100" r="65" :fill="hsla"/>
</svg>

The inner radius of a circle's stroke is always half the stroke width less than the radius, so to keep the inner radius in the same place you have to increase the radius of the circle by half of its stroke, like: https://jsfiddle.net/f3wctoyL/1/
<svg width="400" height="400">
<circle id="a" cx="200" cy="200" r="100" />
<circle id="b" cx="200" cy="200" r="110" />
<circle id="c" cx="200" cy="200" r="105" />
</svg>
The strokes on circles b and c have inner radii of 100.

just call this function. have a nice day
function strokeInside(svgIdSelector, strokeValue) {
let svgElement = document.getElementById(svgIdSelector),
svgRect = svgElement.getBBox(),
scale = ( (svgRect.height - strokeValue) * 100/svgRect.height )/100;
if (scale < 0.5) {
console.error("max stroke value = " + [svgRect.height / 2]);
return false;
}
svgElement.setAttributeNS(null, "stroke-width", strokeValue/scale);
svgElement.setAttributeNS(null, "transform", "translate(100,100) scale(" + scale + ")");
return true;
}
strokeInside("group", 70);
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-35 -35 270 270">
<defs>
<linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff0000" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#ffff00" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffff00" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#00ff00" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#00ff00" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#00ffff" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#00ffff" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#0000ff" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#0000ff" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#ff00ff" :stop-opacity="saturation"/>
</linearGradient>
<linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
<stop offset="0%" stop-color="#ff00ff" :stop-opacity="saturation"/>
<stop offset="100%" stop-color="#ff0000" :stop-opacity="saturation"/>
</linearGradient>
</defs>
<g id="group" fill="none" stroke-width="1" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
</g>
</svg>

Babel's "replaceWithMultiple" adds unnecessary parentheses

Please check it out the gist bellow. I'm confused I would expect the same output but without the parentheses and ,. Any clue what I'm doing wrong?
https://astexplorer.net/#/gist/7f499680fcd4aaaba9af215afe42de80/c91228b082de80ef2c57e9c1960b22f884d1e694
E.g
Babel plugin:
export default function (babel) {
const { types: t } = babel;
return {
name: "ast-transform", // not required
visitor: {
JSXElement(path) {
if (path.node.openingElement.name.name === "defs") {
path.replaceWithMultiple(
path.node.children.filter(t.isJSXElement)
);
}
},
}
};
}
Actual:
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="72" height="72" fill="white" />
<path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
<path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
<path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
(
<linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>,
<linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>)
</svg>;
Expected:
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="72" height="72" fill="white" />
<path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
<path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
<path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
<linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>
<linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>
</svg>;
Cheers,
EDIT: One idea I got is to use the Fragments
path.replaceWith(
t.jsxFragment(
t.jsxOpeningFragment(),
t.jsxClosingFragment(),
path.node.children.filter(t.isJSXElement)
)
);
with the result
<>
<linearGradient
id="prefix__paint0_linear"
x1={53.96}
y1={17.29}
x2={39.25}
y2={32.46}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.18} stopColor="#0052CC" />
<stop offset={1} stopColor="#2684FF" />
</linearGradient>
<linearGradient
id="prefix__paint1_linear"
x1={1421.65}
y1={1327.85}
x2={786.064}
y2={1949.52}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.18} stopColor="#0052CC" />
<stop offset={1} stopColor="#2684FF" />
</linearGradient>
</>
Better, but not entirety what I want.

You could try to use replaceInline instead; it doesn't add any parentheses or comma's in your AST Explorer example.
My guess is that this is caused by the leading and trailing comments that are added when using replaceWithMultiple. Check out the source code here:
https://github.com/babel/babel/blob/0345c1bc1ded6af8d66f8605e6fdbeeb9b70c5b3/packages/babel-traverse/src/path/replacement.js#L50
and compare it to the source of replaceInline:
https://github.com/babel/babel/blob/0345c1bc1ded6af8d66f8605e6fdbeeb9b70c5b3/packages/babel-traverse/src/path/replacement.js#L266

Multiple colors in one single character(svg)

I'm looking for a solution in SVG that enables several colors in one single character without any visual gradients.
Here is an example of how I want the result to look like
Here is the best solution that I can come up with. This works perfect with only 2 colors, but more colors doesn't give the result that I want.
<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="33%" stop-color="blue"/>
<stop offset="33%" stop-color="red"/>
<stop offset="66%" stop-color="orange"/>
</linearGradient>
</defs>
<text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6
</text>
</svg>

Use multiple stops of the same colour if you don't want gradients.
<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bicolored" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="33%" stop-color="blue"/>
<stop offset="33%" stop-color="red"/>
<stop offset="66%" stop-color="red"/>
<stop offset="66%" stop-color="orange"/>
</linearGradient>
</defs>
<text font-family="Arial" font-size="35" font-weight="bold" x="0" y="45" fill="url(#bicolored)">6
</text>
</svg>

triangles in triangle CSS

I'm trying to create webpage with navigation in fixed triangle.
The problem is that i can't fit smaller triangles inside the big one, like displayed on photo below.
Triangle is changing its angle when window is resized, so i can't set it as images.
I'm stuck after creating big triangle, here is css and html:
.triangle {
position:fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
padding-bottom: 10%;
overflow: hidden;
z-index:5;
}
.triangle:after {
content: "";
display: block;
width: 0;
height: 0;
border-right: 300px solid transparent;
border-bottom: 100vh solid grey;
}
<div class="triangle"></div>
How i can realize this design?

Thanks for Qwertiy!
I forgot that i can do all this using svg.
Result:
#triangle{
height:100vh;
position:fixed;
top:0;
left:0;
}
#triangle svg{
height:100%;
}
<div id="triangle">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="image-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 8296 10958"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMid meet">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#3C3A3B}
.fil1 {fill:#2BB67E}
.fil7 {fill:#252525}
.fil2 {fill:#1B9567}
.fil8 {fill:#1B9567}
.fil4 {fill:#236B4D}
.fil3 {fill:#147852}
.fil9 {fill:#147852}
.fil5 {fill:#0F6948}
.fil6 {fill:#0F6948}
]]>
</style>
<mask id="id0">
<linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="1546.09" y1="2400.5" x2="2245.49" y2="3327.41">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.658824" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id1)" x="1371" y="2533" width="1050" height="662"/>
</mask>
<mask id="id2">
<linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="824.138" y1="2789.31" x2="546.587" y2="3652.24">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.678431" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id3)" y="2761" width="1371" height="920"/>
</mask>
<mask id="id4">
<linearGradient id="id5" gradientUnits="userSpaceOnUse" x1="1208.94" y1="3086.85" x2="1275.56" y2="3573.33">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id5)" y="2848" width="2485" height="964"/>
</mask>
<mask id="id6">
<linearGradient id="id7" gradientUnits="userSpaceOnUse" x1="7048.03" y1="9572.37" x2="6622.58" y2="8467.99">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id7)" x="6256" y="8252" width="1158" height="1536"/>
</mask>
<mask id="id8">
<linearGradient id="id9" gradientUnits="userSpaceOnUse" x1="5660.97" y1="9414.52" x2="5171.17" y2="9015.96">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.6" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id9)" x="4503" y="8252" width="1825" height="1926"/>
</mask>
<mask id="id10">
<linearGradient id="id11" gradientUnits="userSpaceOnUse" x1="2214.44" y1="10409" x2="1277.21" y2="10775.8">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id11)" x="1070" y="10226" width="1351" height="732"/>
</mask>
<mask id="id12">
<linearGradient id="id13" gradientUnits="userSpaceOnUse" x1="3426.59" y1="10530.6" x2="3446.52" y2="10158.6">
<stop offset="0" style="stop-opacity:1; stop-color:white"/>
<stop offset="0.6" style="stop-opacity:0.501961; stop-color:white"/>
<stop offset="1" style="stop-opacity:0; stop-color:white"/>
</linearGradient>
<rect style="fill:url(#id13)" x="2369" y="10101" width="2134" height="488"/>
</mask>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<polygon class="fil0" points="8296,10958 6994,9231 0,0 0,10958 3325,10958 4148,10958 "/>
<polygon class="fil1" points="997,1316 0,0 490,1618 "/>
<polygon class="fil2" points="492,1618 1919,2533 997,1316 "/>
<polygon class="fil3" points="0,2761 490,1618 0,1893 "/>
<polygon class="fil4" points="0,2761 490,1618 1919,2533 "/>
<polygon class="fil5" points="0,1899 0,0 490,1618 "/>
<polygon class="fil1" points="1371,2848 1919,2533 0,2761 "/>
<polygon class="fil1" style="mask:url(#id0)" points="1371,2848 1919,2533 2421,3195 "/>
<polygon class="fil6" style="mask:url(#id2)" points="0,3680 0,2761 1371,2848 "/>
<polygon class="fil1" points="5759,10366 7414,10568 7414,9788 "/>
<polygon class="fil7" style="mask:url(#id4)" points="1482,3580 2484,3279 2421,3195 1371,2848 0,3680 0,3812 "/>
<polygon class="fil4" points="6329,9607 5759,10366 7414,9788 "/>
<polygon class="fil8" style="mask:url(#id6)" points="6329,9607 7414,9788 6257,8252 "/>
<polygon class="fil8" points="8296,10958 7414,10568 7414,9788 "/>
<polygon class="fil4" points="8296,10958 7414,10568 6415,10958 "/>
<polygon class="fil9" points="5759,10366 7414,10568 6415,10958 "/>
<polygon class="fil1" points="5759,10366 6415,10958 4504,10178 "/>
<polygon class="fil8" points="3945,10588 6415,10958 4504,10178 "/>
<polygon class="fil9" points="5759,10366 6329,9607 4504,10178 "/>
<polygon class="fil7" style="mask:url(#id8)" points="6257,8252 6258,8286 6329,9607 4504,10178 5842,9236 "/>
<polygon class="fil4" points="3945,10588 6415,10958 3945,10958 "/>
<polygon class="fil1" points="2370,10226 3945,10588 2421,10958 "/>
<polygon class="fil8" style="mask:url(#id10)" points="2370,10226 1070,10958 2421,10958 "/>
<polygon class="fil7" style="mask:url(#id12)" points="4504,10178 3945,10588 2370,10226 3835,10101 "/>
<polygon class="fil8" points="3945,10588 2421,10958 3945,10958 "/>
</g>
</svg>
</div>
And it is fully responsive for any screen size.