I made an svg image in Adobe Illustrator (id="gray-x-button"), and I want to use the svg code as a custom shaped checkbox. Once the user clicks on the checkbox, I want the checkbox to change to a different svg image I made in Illustrator (id="red-x-button"). How would I do that using HTML, CSS, and Javascript? I'm very new to web development, so I've been having trouble even knowing where to begin. All I have right now is my svg code that I exported from Illustrator, which I will post below.
<svg id="gray-x-button" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">s
<defs>
<style>.cls-1-g{fill:url(#linear-gradient);}.cls-2-g{opacity:0.25;}.cls-3-g{fill:#fff;}</style>
<linearGradient id="linear-gradient" x1="187.42" y1="187.55" x2="317.1" y2="317.23" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#d1d1d1"/>
<stop offset="0.62" stop-color="#acadaf"/>
<stop offset="1" stop-color="#939598"/>
</linearGradient>
</defs>
<path id="Cross-g" class="cls-1-g" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
<g id="Depth-g" class="cls-2-g">
<path class="cls-3-g" d="M305.08,180.13a4.2,4.2,0,0,1,3,1.25l-2-2a4.25,4.25,0,0,0-6,0l-47.81,47.8-47.81-47.8a4.25,4.25,0,0,0-6,0l-19.19,19.18a4.26,4.26,0,0,0,0,6l2,2a4.26,4.26,0,0,1,0-6l19.19-19.18a4.25,4.25,0,0,1,6,0l47.81,47.8,47.81-47.8A4.2,4.2,0,0,1,305.08,180.13Z" transform="translate(-176 -176.13)"/>
<polygon class="cls-3-g" points="149.28 124.07 103.47 78.27 149.28 124.07 149.28 124.07"/>
<path class="cls-3-g" d="M227.8,256.13l-2-2-46.64,46.64a4.16,4.16,0,0,0,0,5.88l18.72,18.72h0l-16.77-16.77a4.16,4.16,0,0,1,0-5.88Z" transform="translate(-176 -176.13)"/>
</g>
</svg>
<svg id="red-x-button" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">
<defs>
<style>.cls-1-r{fill:#231f20;}.cls-2-r{fill:url(#radial-gradient);}</style>
<radialGradient id="radial-gradient" cx="252.26" cy="252.39" r="74.26" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f7941d"/>
<stop offset="0.2" stop-color="#f4701f"/>
<stop offset="0.43" stop-color="#f14c21"/>
<stop offset="0.65" stop-color="#ef3123"/>
<stop offset="0.85" stop-color="#ed2224"/>
<stop offset="1" stop-color="#ed1c24"/>
</radialGradient>
</defs>
<path id="Cross-r" class="cls-1-r" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
<path class="cls-2-r" d="M303.08,326.66a4.24,4.24,0,0,1-3-1.25L252.26,277.6l-47.81,47.81a4.25,4.25,0,0,1-6,0l-19.19-19.19a4.26,4.26,0,0,1,0-6l47.81-47.81-47.81-47.81a4.26,4.26,0,0,1,0-6l19.19-19.19a4.26,4.26,0,0,1,6,0l47.81,47.8,47.81-47.81a4.26,4.26,0,0,1,6,0l19.19,19.18a4.26,4.26,0,0,1,0,6l-47.81,47.81,47.81,47.81a4.25,4.25,0,0,1,0,6l-19.19,19.19A4.24,4.24,0,0,1,303.08,326.66Z" transform="translate(-176 -176.13)"/>
</svg>
I would prefer to use inline svg code so I can modify it with CSS later. Thanks!
You can find the right answer and further information on this relative post
style-a-checkbox-using-css
This is my gauge, but I don't know a formula to render value of this gauge. Somebody can help me with this?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="145" viewBox="0 0 200 145">
<defs>
<linearGradient id="b" x1="5.165%" y1="76.151%" y2="75.039%">
<stop offset="0%" stop-color="#E9F1FF"/>
<stop offset="100%" stop-color="#DBE7FF"/>
</linearGradient>
<linearGradient id="c" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
<stop offset="0%" stop-color="#FF8600"/>
<stop offset="100%" stop-color="#FFC86A"/>
</linearGradient>
<path id="a" d="M100 0c55.228 0 100 44.772 100 100 0 15.954-3.736 31.036-10.382 44.418l-17.912-8.906c5.31-10.7 8.294-22.757 8.294-35.512 0-44.183-35.817-80-80-80s-80 35.817-80 80c0 12.843 3.027 24.98 8.405 35.735l-17.912 8.906C3.778 131.204 0 116.043 0 100 0 44.772 44.772 0 100 0z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="c" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="url(#b)" xlink:href="#a"/>
<g stroke="#FFF" stroke-width="5" mask="url(#c)" opacity=".3">
<path d="M99.5 97V0M100.252 97.061L110.392.593M100.16 97.06l21.821-94.513M100.885 97.276l31.58-91.715M100.8 97.241l42.523-87.183M101.465 97.6l51.402-82.26M101.399 97.536l61.044-75.383M101.976 98.025l68.589-68.59M102.463 98.6l75.383-61.043M102.4 98.536l82.26-51.403M102.759 99.199l87.183-42.522M102.725 99.115l91.715-31.58M102.94 99.839l94.513-21.82M102.939 99.747l96.468-10.139M103 100.5h97M102.939 101.253l96.469 10.139M102.94 101.16l94.513 21.821M102.724 101.884l91.715 31.58M102.759 101.8l87.183 42.523M102.399 102.465l82.26 51.402M102.464 102.4l75.383 61.044M101.974 102.975l68.59 68.59M101.4 103.464l61.044 75.383M101.464 103.4l51.402 82.26M100.801 103.76l42.522 87.182M100.884 103.724l31.58 91.716M100.161 103.94l21.82 94.513M100.253 103.939l10.139 96.468M99.5 104v97M98.747 103.939l-10.139 96.468M98.839 103.94l-21.82 94.513M98.116 103.724l-31.58 91.716M98.199 103.76l-42.522 87.182M97.536 103.4l-51.402 82.26M97.6 103.464l-61.044 75.383M97.026 102.975l-68.59 68.59M96.536 102.4l-75.383 61.044M96.601 102.465l-82.26 51.402M96.241 101.8L9.058 144.324M96.276 101.884l-91.715 31.58M96.06 101.16L1.548 122.982M96.061 101.253L-.408 111.392M96 100.5H-1M96.061 99.747L-.407 89.608M96.06 99.839L1.548 78.019M96.275 99.115L4.56 67.535M96.241 99.199L9.058 56.677M96.6 98.536L14.34 47.133M96.537 98.6L21.154 37.558M97.024 98.025l-68.589-68.59M97.601 97.536L36.557 22.153M97.535 97.6L46.133 15.34M98.2 97.241L55.676 10.058M98.115 97.276L66.535 5.56M98.84 97.06L77.018 2.548M98.748 97.061L88.608.593"/>
</g>
</g>
<path fill="none" fill-rule="evenodd" stroke="url(#c)" stroke-width="20" d="M72.705 14.214C36.343 25.773 10 59.81 10 100c0 14.45 3.405 28.105 9.457 40.205"/>
</svg>
As #enxaneta pointed out, you should better use strokes.
To display percentage based value segments on your gauge you will foremost need these attributes:
stroke-dasharray: defines the length of segement
stroke-dashoffset: gives you the ability to move your segment
pathlength: changes the computation values ration applied on the stroke-dash attributes
pathlength="100" show 25/100 – useful, if you're working with percentages (e.g. retrieved by some api)
pathlength="100"
stroke-dashoffset="0"
stroke-dasharray="25 100"
pathlength="12" show 3/12 – really handy if you get 'stepped' integer values
pathlength="12"
stroke-dashoffset="0"
stroke-dasharray="3 12"
MDN: pathLength
Here is a rebuild of you gauge using strokes:
svg{
border:1px solid #ccc;
width:33%
}
.gauge-segment{
transition: 0.3s;
}
svg:hover .gauge-segment{
stroke-dashoffset:-33;
stroke-dasharray: 66 100;
}
<p>Hover will change the gauge segment</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 120">
<defs>
<linearGradient id="gradientBackground" gradientTransform="rotate(30)">
<stop offset="0%" stop-color="#E9F1FF"/>
<stop offset="100%" stop-color="#DBE7FF"/>
</linearGradient>
<linearGradient id="gradientSegment" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
<stop offset="0%" stop-color="#FF8600"/>
<stop offset="100%" stop-color="#FFC86A"/>
</linearGradient>
</defs>
<!-- gauge path -->
<symbol id="stroke">
<path pathlength="100" fill="none" stroke-width="10" d="M55.6,103C52,96.1,50,88.3,50,80
c0-27.6,22.4-50,50-50s50,22.4,50,50c0,8.3-2,16.1-5.6,23"/>
</symbol>
<!-- gauge background -->
<g id="gaugeBackground" >
<use id="gaugeBackgroundColor" href="#stroke" stroke="url(#gradientBackground)"></use>
<use id="gaugeBackgroundDash" href="#stroke" stroke="#E9F1FF" stroke-dashoffset="0" stroke-dasharray="1 1" ></use>
</g>
<!-- percentages -->
<g id="gaugeSegments" >
<use id="segment01" class="gauge-segment" href="#stroke" filter="" stroke="url(#gradientSegment)" stroke-dashoffset="0" stroke-dasharray="33 100"></use>
</g>
</svg>
Below is the code that works great in Firefox, but any attempts to animate the linear gradient's offset attribute in Chrome ended in nothing.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0" y1="0" x2="900" y2="900" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="52%" stop-color="white">
<animate
attributeName="offset"
values="100%;0%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="100%;50%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Also tried using gradientUnits =" objectBoundingBox "
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="52%" stop-color="white">
<animate
attributeName="offset"
values="100%;0%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="100%;50%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Any solution to this problem will do with: SVG,css, javascript
One solution to this would be using floating numbers instead of percentages, i.e values="1;0;1" instead of values="100%;0%;100%"
svg{border:1px solid}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0" y1="0" x2="50%" y2="50%" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="dodgerblue"/>
<stop offset=".52" stop-color="white">
<animate
attributeName="offset"
values="1;0;1"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="1" stop-color="gold">
<animate
attributeName="offset"
values="1;.5;1"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Here is an idea with CSS only where you can rely on two gradients and a translation/opacity animation to approximate it. I also considered a little blur effect to have a better transition between gradient.
.box {
border-radius:20px;
width:200px;
height:200px;
position:relative;
z-index:0;
overflow:hidden;
}
.box:before,
.box:after{
content:"";
position:absolute;
bottom:0;
right:0;
width:220%;
height:220%;
animation:translate 2s infinite linear alternate;
}
.box:after {
background:
linear-gradient(to bottom right,dodgerblue 0%,white 40%,gold 60%);
animation-name:translate,show;
opacity:0;
}
.box:before {
background:
linear-gradient(to bottom right,dodgerblue,white 50%,gold 50%);
animation-name:translate,fade;
}
#keyframes translate{
from {
transform:translate(48%,48%);
}
}
#keyframes show{
30%,85% {
opacity:1;
}
}
#keyframes fade{
30%,85% {
filter:blur(8px);
}
}
<div class="box">
</div>
You can always use javascript for that:
requestAnimationFrame(animateOffsets);
// if this function called as callback of requestAnimationFrame,
// so there are first argument is the time from beginning from scene start
function animateOffsets(t) {
requestAnimationFrame(animateOffsets);
t = t%5000/5000; // will change from 0 to 1 (5 sec)
t = Math.sin(t*Math.PI*2); // will change from -1 to 1
stop1.setAttribute('offset', `${50 + t*50}%`);
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0" y1="0" x2="60%" y2="60%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="50%" stop-color="white" id="stop1"/>
<stop offset="100%" stop-color="gold"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Gradient attribute offset animation as background image
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<linearGradient id="bgg" x1="479" y1="-345" x2="479" y2="853" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff">
<animate
attributeName="offset"
values="0;1;1;0;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="0;1;1;0;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
</linearGradient>
<rect x="-45" y="0" width="70%" height="70%" rx="5%" fill="#ACA900" />
<rect x="65" y="80" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
<image x="30" y="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg" width="50%" height="50%" />
</svg>
Radial gradient effects
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<radialGradient id="myRadial"
fx="50%" fy="50%" r="80%">
<stop offset="0%" stop-color="gold">
<animate
attributeName="offset"
values="0;1.3;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
<stop offset="100%" stop-color="#EDEDED">
<animate
attributeName="offset"
values="0;1.3;1.3;0;0"
dur="5s"
repeatCount="indefinite"
></animate>
</stop>
</radialGradient>
<rect x="0" y="0" width="70%" height="70%" rx="5%" fill="#ACC400" />
<rect x="85" y="80" width="50%" height="50%" rx="5%" fill="url(#myRadial)" />
</svg>
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>
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.