i want to use this animated as background. Svg fill animation is need to animate this svg image,
but, i can't understood that.
image link i want
<svg class="translate-y-[25%] translate-x-1/3 transform-gpu lg:w-[725px] 2xl:h-[940px] 2xl:w-[979px]" viewBox="0 0 979 940" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M916.44 542.73C916.44 759.742 1221.12 893.447 485.73 935.665C-249.656 977.884 73.651 701.676 55.0199 542.73C36.3888 383.785 210.098 445.489 210.098 316.311C210.098 187.134 286.044 270.936 393.995 193.072C501.947 115.207 360.243 108.245 679.166 13.9659C998.088 -80.3132 916.44 325.718 916.44 542.73Z" fill="url(#paint0_radial_2978_41613)"></path>
<defs>
<radialGradient id="paint0_radial_2978_41613" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(754.239 148.024) rotate(129.699) scale(1296.28 1230.91)">
<stop stop-color="#42ADDB"></stop>
<stop offset="1" stop-color="#9AFAFA"></stop>
</radialGradient>
</defs>
</svg>
Related
I am wanting to add an SVG logo that I have (I have the SVG code also) on top of a rectangle with a radial background colour that also contains some title text, however I'm unsure of how to do this.
For context, I am using React-PDF, so the syntax is slightly different.
Currently I have
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
</Svg>
I then also have my SVG logo (shortened here for conciseness):
<Svg width="80" height="52" viewBox="0 0 80 52" fill="none">
<Path d="M0 47.6941V37.8042C0... fill="green"/>
...
</Svg
I am wondering how I can add the logo to the main piece...
I have attempted to place the full <Svg>/*logo*/</Svg> to the main section, but this produced an error:
I have also tried moving all of the <Path> pieces into the main block, without the <Svg> wrapper, which did work to some extent, but then I found that I didn't know how to move them down and right...
This is the example:
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
<Path d="M0 47.6941V37.8042C0... fill="green"/>
/* rest of the logo svg paths here */
</Svg>
You can wrap your logo in a group and apply a transform to it
<svg width="555" height="80" viewBox="0 0 555 80">
<defs>
<radialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<stop stop-color="#A01858"/>
<stop offset="1" stop-color="#87005F"/>
</radialGradient>
</defs>
<rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<text x="500" y="50%" text-anchor="end" dominant-baseline="middle">Some title here</text>
<g transform="translate(20,10) scale(0.5 0.5)">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="green" />
</g>
</svg>
So I have this svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
<defs>
<radialGradient id="0" gradientTransform="translate(-1 0) scale(2, 2)">
<stop offset="0%" stop-color="rgb(0, 95, 89)"/>
<stop offset="100%" stop-color="rgb(0,0,0)"/>
<animateTransform attributeName="gradientTransform" type="translate" values="-1 0;-1 -1;0 -1;0 0;-1 0" type="scale" values="2, 2;2, 2;2, 2;2, 2" dur="5s" begin="0s" repeatCount="indefinite"/>
</radialGradient>
</defs>
<rect fill="url(#0)" height="100%" width="100%"/>
</svg>
My idea is want to make the gradient is shifting from top-left corner to top-right corner..and so on, and it continue looping. instead of resulting that, my svg going so weird. that the animation coming from the top.
when I remove the animation, the gradient is normal from what I am expected, the gradient placed at top-left corner.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
<defs>
<radialGradient id="0" gradientTransform="translate(-1 -1) scale(2, 2)">
<stop offset="0%" stop-color="rgb(0, 95, 89, 0.4)"/>
<stop offset="100%" stop-color="rgb(0,0,0)"/>
</radialGradient>
</defs>
<rect fill="url(#0)" height="100%" width="100%"/>
</svg>
can you help me to achieve that, please. Thank you
Since you'll use gradientTransform for animation, things get easier if you don't use it for the basic gradient itself. In this case, we can use cx, cy and r to place the gradient in the top left corner.
As a bonus, your animation coordinates also get easier to work with: 0 0 is the top left corner and 1 1 is bottom right.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="0" cx="0" cy="0" r="100%">
<stop offset="0%" stop-color="rgb(0, 195, 189)"/>
<stop offset="100%" stop-color="rgb(0,0,0)"/>
<animateTransform attributeName="gradientTransform" type="translate" values="0 0; 1 0; 1 1; 0 1; 0 0;"
dur="5s" repeatCount="indefinite"/>
</radialGradient>
</defs>
<rect fill="url(#0)" height="100%" width="100%"/>
</svg>
I am trying to combine all svg icons into one sprite file like this for organization, caching and other purposes. But for some reason, linearGradient is not being applied
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
</defs>
</g>
</svg>
Now, in file preview I can see circle with applied gradient correctly
When I try to import it into my HTML like this
<svg>
<use href="#toggle" xlink:href="#toggle"></use>
</svg>
the circle is not being colored with defined gradient
When I moved <linearGradient> out of svg file, it worked, but why?
<svg>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
<use href="#toggle" xlink:href="#toggle"></use>
</svg>
Even tho it worked, the problem is, that this kills the purpose of keeping all the icons in one file if some styling can only be defined from the outside. Displaying same icon will force me defining same gradient multiple times. Would love to have everything in the same file. Any ideas or insights?
P.S. importing as <img> displays the circle gradient correctly.
Pretty sure, you have hidden your main svg asset file by display:none.
If you change this to visibility:hidden it should work:
function unhide(){
document.querySelector('.dsp-non').classList.remove('dsp-non');
}
.svgAssetHidden{
visibility:hidden;
position:absolute;
width:0px;
height:0px;
overflow:hidden;
}
.svgIcon{
display:inline-block;
width:10em;
}
.dsp-non{
display:none;
}
<button onclick="unhide()">remove display:none</button>
<h3>visibility:hidden</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
<use href="#toggle" href="#toggle"></use>
</svg>
<h3>display:none</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
<use href="#toggle2" href="#toggle"></use>
</svg>
<svg class="svgAssetHidden" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
</defs>
</g>
</svg>
<svg class="svgAssetDspNon dsp-non" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle2">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient2')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient2" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C0000"/>
</linearGradient>
</defs>
</g>
</svg>
Hiding a svg by display:none will also break some other features like filters.
I'm currently struggling with a SVG.
Right now, I'm trying to display an animated SVG in my webpage. In order to do it, I just put the svg code at the end of the body, and used the html tag "use" to embed my SVG (which contains a symbol).
Here is my SVG code :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient">
<stop offset="0%" stop-color="#7A5FFF">
<animate attributeName="stop-color" values="#05FFA3; #45CAFC; #7873F5; #FC6262; #05FFA3;" dur="10s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#01FF89">
<animate attributeName="stop-color" values="#2096FF; #303F9F; #FF6EC4; #FFD86F; #2096FF;" dur="10s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<symbol x="0px" y="0px" width="308px" height="308px" viewBox="0 0 308 308" id="svg-logo">
<circle cx="150" cy="150" r="150" fill="url(#linearGradient)" />
</symbol>
</svg>
And here is the way I embed it in my page :
<svg class="star">
<use xlink:href="#svg-logo">
</svg>
It works fine, except on safari. The linear gradient animation is completely broken, and looks like this :
I love external stylesheets and want to be able to style any SVG graphics via an external sheet. I can declare single colour stroke and fill for my SVG logo but I want a gradient fill. I've tried a view things but can't get it to work right. Can someone help me figure out how to make it work?
I'm not sure how to put a code snippet considering I'm discussing external code, not inline, so here's a link to the SVG logo in question and its matching external stylesheet.
Actual logo I'm trying to recreate in SVG (PNG):
SVG logo: http://www.cafenocturne.com/testpage/images/svg/CafeLogoSVG.svg
Stylesheet: http://www.cafenocturne.com/testpage/css/CafeLogoSVG.css
There are some commented-out notes to make sure I don't lose the gradient code I'm trying to implement so I apologize that the CSS file is a mess. Once I can get it to work right, I won't need to keep notes there.
So how do I achieve this?
add the gradient to your SVG file, and change the stop-color from CSS:
#color1 {
stop-color: red
}
#color2 {
stop-color: blue
}
<svg>
<linearGradient id="lg">
<stop id="color1" offset="0" />
<stop id="color2" offset="1" />
</linearGradient>
<circle cx="50" cy="50" r="45" fill="url(#lg)" />
</svg>
if you need more control of your gradients, you could specify gradients in a seperate file (say 'myGradients.svg')
<svg xmlns="http://www.w3.org/2000/svg">
<linearGradient id="g1">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
<linearGradient id="g2">
<stop offset="0" stop-color="green"/>
<stop offset="1" stop-color="yellow"/>
</linearGradient>
</svg>
now in your css you can do
.logo {fill: url('myGradients.svg#g2');}
unfortunately this doesn't work in chrome :-(
alternatively you can have a copy of your gradient collection in your logo file or html, and still style it with css
.color1 {
stop-color: green
}
.color2 {
stop-color: yellow
}
#logo1 {
fill: url(#g1)
}
#logo2 {
fill: url(#g2)
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="0" height="0">
<linearGradient id="g1">
<stop offset="0" class="color1" />
<stop offset="1" class="color2" />
</linearGradient>
<radialGradient id="g2">
<stop offset="0" class="color1" />
<stop offset="1" class="color2" />
</radialGradient>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<circle id="logo1" cx="50" cy="50" r="45" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<circle id="logo2" cx="50" cy="50" r="45" />
</svg>