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.
Related
I'm familiar with binding the 'mousemove' event (shown below) to a div and moving the div around the page while hiding the real cursor, but is there a way to take this further, in order to change the shape of the circle to an SVG path, and to drag the SVG path around the page instead of a circle?
document.onmousemove = function(e) {
document.getElementsByClassName('cursor')[0].style.setProperty('--x',(e.clientX)+'px');
document.getElementsByClassName('cursor')[0].style.setProperty('--y',(e.clientY)+'px');
}
body {
background-color: black;
cursor: none;
}
.cursor {
content:"";
position:absolute;
z-index:999;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(farthest-side ,#fff 95%,transparent 100%)
calc(var(--x) - .75em) calc(var(--y) - .75em)/1.5em 1.5em fixed no-repeat;
mix-blend-mode:difference;
pointer-events: none;
cursor: none;
}
<body>
<div class="cursor">
</div>
</body>
It worked for me.
document.onmousemove = function(e) {
document.getElementsByClassName('cursor')[0].style.setProperty('--x',(e.clientX)+'px');
document.getElementsByClassName('cursor')[0].style.setProperty('--y',(e.clientY)+'px');
}
body {
background-color: black;
cursor: none;
}
.cursor {
content:"";
position:absolute;
top: var(--y);
left: var(--x);
pointer-events: none;
cursor: none;
}
<body>
<body>
<svg width="3.5%" class="cursor" version="1.1" viewBox="0 0 60 210" xmlns="http://www.w3.org/2000/svg">
<title>Sword</title>
<desc>https://www.sololearn.com/Profile/8896242</desc>
<defs>
<linearGradient id="edge_grad">
<stop offset="0%" stop-color="white" />
<stop offset="10%" stop-color="grey" />
<stop offset="100%" stop-color="black" />
</linearGradient>
<linearGradient id="dol_grad">
<stop offset="0%" stop-color="black" />
<stop offset="50%" stop-color="grey" />
<stop offset="100%" stop-color="black" />
</linearGradient>
<linearGradient id="gard_grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="white" />
<stop offset="20%" stop-color="grey" />
<stop offset="100%" stop-color="black" />
</linearGradient>
<radialGradient id="ruby_grad">
<stop offset="0%" stop-color="#900020" />
<stop offset="50%" stop-color="#f50029" />
<stop offset="100%" stop-color="#7b001c" />
</linearGradient>
<linearGradient id="handle_grad">
<stop offset="0%" stop-color="#cc6600" />
<stop offset="20%" stop-color="#753313" />
<stop offset="100%" stop-color="#4d220e" />
</linearGradient>
<linearGradient id="pommel_grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5b6669" />
<stop offset="20%" stop-color="#434b4d" />
<stop offset="70%" stop-color="#23282b" />
<stop offset="100%" stop-color="#000000" />
</linearGradient>
</defs>
<g stroke="black">
<path id="edge" fill="url(#edge_grad)" d="M20,150 v-130 l10,-20 l10,20 v130 l-10,-2.5 z" />
<path id="dol" fill="url(#dol_grad)" d="M28,148 v-130 q2,-5 4,0 v130 l-2,-1 z" />
<path id="gard" fill="url(#gard_grad)" d="M0,150 h20 l10,-2.5 l10,2.5 h20 l-25,10 q-5,1.5 -10,0 z" />
<g id="ruby">
<path fill="url(#ruby_grad)" d="M20,150 l10,-2.5 l10,2.5 l-5,10 q-5,1.5 -10,0 z" />
<line x1="20" y1="150" x2="30" y2="154" />
<line x1="30" y1="147.5" x2="30" y2="154" />
<line x1="40" y1="150" x2="30" y2="154" />
<line x1="25" y1="160" x2="30" y2="154" />
<line x1="35" y1="160" x2="30" y2="154" />
</g>
<g id="handle">
<path fill="url(#handle_grad)" d="M25,160 v30 q5,2.5 10,0 v-30 q-5,1.5 -10,0 z" />
<line x1="25" y1="162" x2="30" y2="161" />
<line x1="25" y1="165" x2="35" y2="162" />
<line x1="25" y1="168" x2="35" y2="165" />
<line x1="25" y1="171" x2="35" y2="168" />
<line x1="25" y1="174" x2="35" y2="171" />
<line x1="25" y1="177" x2="35" y2="174" />
<line x1="25" y1="180" x2="35" y2="177" />
<line x1="25" y1="183" x2="35" y2="180" />
<line x1="25" y1="186" x2="35" y2="183" />
<line x1="25" y1="189" x2="35" y2="186" />
<line x1="27" y1="191" x2="35" y2="189" />
</g>
<g id="pommel">
<path fill="url(#pommel_grad)" d="M25,190 l-5,13 l10,7 l10,-7 l-5,-13 q-5,2.5 -10,0 z" />
<line x1="30" y1="191.5" x2="30" y2="210" />
<line x1="20" y1="203" x2="40" y2="203" />
</g>
</g>
</svg>
</div>
</body>
Hi I'm working with SVG here I trying to add the gradient to SVG like this
white and grey gradient but I unable to achieve the desired output. Can anyone point me in the right direction.
<svg viewBox="0 0 400 400">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat">
<stop offset="0.05" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#777" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#fff" stop-opacity="0"/>
<stop offset="10%" stop-color="#bdbdbd" stop-opacity="0.5"/>
<stop offset="20%" stop-color="#fff" stop-opacity="0"/>
<stop offset="30%" stop-color="#bdbdbd" stop-opacity="0.5"/>
<stop offset="40%" stop-color="#fff" stop-opacity="0"/>
<stop offset="50%" stop-color="#bdbdbd" stop-opacity="1"/>
<stop offset="60%" stop-color="#fff" stop-opacity="0"/>
<stop offset="70%" stop-color="#bdbdbd" stop-opacity="0.5"/>
<stop offset="80%" stop-color="#bdbdbd" stop-opacity="0"/>
<stop offset="100%" stop-color="#fbfbfb" stop-opacity="0.5"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
Fine-tuning the rendering of shades of gray and white colors depends on which video card, browser and operating system you are using.
Therefore, I am sending several options. You can use any option that you prefer or slightly adjust for yourself by changing the colors.
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/>
<stop offset="17%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="49%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="80%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
2# variant
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/>
<stop offset="17%" stop-color="#F6F6F6" stop-opacity="0.8"/>
<stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="49%" stop-color="#F6F6F6" stop-opacity="0.8"/>
<stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="80%" stop-color="#F6F6F6" stop-opacity="0.8"/>
<stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
3# variant
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#ABABAC" stop-opacity="1"/>
<stop offset="17%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="30%" stop-color="#ABABAC" stop-opacity="0.6"/>
<stop offset="49%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="61%" stop-color="#ABABAC" stop-opacity="0.6"/>
<stop offset="80%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="95%" stop-color="#ABABAC" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
For a more precise adjustment to your taste, it is better to use stop-color and stop-opacity choosing values.
Update
For the method spreadMethod ="repeat" to start working in your example, you need to reduce the gradient coverage by three times. To do this, set x1 ="0" y1 ="0" x2 ="0" y2 ="0.33"
As a result, adjusting the color tones of one wave, we get completely identical copies of it, which facilitates the process compared to the option of a large number of stop-offset
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="0.33"
spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="10%" stop-color="#ABABAC" stop-opacity="1"/>
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="85%" stop-color="#ABABAC" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</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 new to using SVGs so I appreciate any patience with what may be a silly question.
I have an SVG image of a cake-like-shape.
Here is the code:
<svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
<linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
<stop offset="0" style="stop-color:#F8E8B9"/>
<stop offset="50%" style="stop-color:#E6C173"/>
<stop offset="100%" style="stop-color:#F8E8B9"/>
</linearGradient>
<!-- Side of Cake -->
<path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z"/>
<g id="XMLID_5_">
<linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
<stop offset="0" style="stop-color:#E6C173;stop-opacity:1"/>
<stop offset="1" style="stop-color:#F8E8B9"/>
</linearGradient>
<!-- Top of Cake -->
<ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18"/>
</g>
</svg>
This was created and exported in Illustrator.
What I want to do is to reduce the width but not the height. It doesn't matter whether it is in JavaScript, CSS or any other method.
Effectively, the cakes will stack whilst keeping the same visual perspective.
From what I gather I just need to extend the length of the side of the cake path (labeled in comments), but am not able to find any way of doing so. It is very possible that I am way off in my guesses!
I've done up a quick jsfiddle with the CSS from the answer below.
hi here i tried to manage this wAy you can check
.container {
postition: relative;
height: 100%;
width: 100%;
}
#Layer_1 {
position: absolute;
top: 95px;
}
#Layer_2 {
position: relative;
transform: scaleY(0.7);
transform: scaleX(0.7);
}
<div class="container">
<svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
<linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
<stop offset="0" style="stop-color:#F8E8B9"></stop>
<stop offset="50%" style="stop-color:#E6C173"></stop>
<stop offset="100%" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Side of Cake -->
<path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z"></path>
<g id="XMLID_5_">
<linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
<stop offset="0" style="stop-color:#E6C173;stop-opacity:1"></stop>
<stop offset="1" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Top of Cake -->
<ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18"></ellipse>
</g>
</svg>
<svg version="1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
<linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
<stop offset="0" style="stop-color:#F8E8B9"></stop>
<stop offset="50%" style="stop-color:#E6C173"></stop>
<stop offset="100%" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Side of Cake -->
<path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z" style="transform: scaleY(0.7);"></path>
<g id="XMLID_5_">
<linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
<stop offset="0" style="stop-color:#E6C173;stop-opacity:1"></stop>
<stop offset="1" style="stop-color:#F8E8B9"></stop>
</linearGradient>
<!-- Top of Cake -->
<ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18" style="transform: scaleY(0.8);"></ellipse>
</g>
</svg>
</div>
you can check out on this Take a Look
a simple way would be using transform:scaleX() in the CSS on the entire SVG element:
//svg{transform:scaleX(0.6)}
svg{transform:scale(0.6,0.6)}//for uniforme scaling
<svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
<linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
<stop offset="0" style="stop-color:#F8E8B9"/>
<stop offset="50%" style="stop-color:#E6C173"/>
<stop offset="100%" style="stop-color:#F8E8B9"/>
</linearGradient>
<!-- Side of Cake -->
<path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z"/>
<g id="XMLID_5_">
<linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
<stop offset="0" style="stop-color:#E6C173;stop-opacity:1"/>
<stop offset="1" style="stop-color:#F8E8B9"/>
</linearGradient>
<!-- Top of Cake -->
<ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18"/>
</g>
</svg>