I'm looking for a way to produce an inner radial shadow hover any image with css and svg (or other ?).
Here is an example of what i would like to do (for header and footer parts)
Have you got any suggestions ? I would like a way the most cross browser as possible.
Thank you !
Do you mean like this?
body{background:black;}
svg{height:100vh; display:block; margin:0 auto;}
<svg viewBox="0 0 300 300">
<defs>
<radialGradient id="rg" cx=".5" cy=".5" r=".5">
<stop offset="30%" stop-color="white"></stop>
<stop offset="100%" stop-color="black"></stop>
</radialGradient>
<mask id="mascara">
<circle cx="150" cy="150" r="100" fill="url(#rg)"></circle>
</mask>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" height="240" width="250" style="mask: url(#mascara)"></image>
</svg>
You may need to detect the position of your mouse and use it as the center for the mask.
Related
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>
i need to get this effect in css.
it's gradient with red as svg this is it:
and black background in the css:
.body-element {
background-color: black;
text-align: left;
background-image: url("data:image/svg+xml;base64, ....");
}
Now the effect is only the back background. How to bring this svg to front of this background ?
I know i can make full img in figma but i have to use background in css.
I don't know what exact effect you want to achieve yet you'll have to use SVG opacity in the gradient to "show through" your background. Here's your SVG, play with the background color of the first rectangle in the code (mimicking your black background):
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<defs>
<linearGradient id="linGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" stop-color="#333333" stop-opacity="0.25" />
<stop offset="1" stop-color="darkred" stop-opacity="0.75" />
</linearGradient>
<mask id="gradient-mask1">
<rect x="100" y="100" width="200" height="200" fill="url(#linGradient1)" />
</mask>
</defs>
<rect x="0" y="0" width="400" height="400" fill="black" />
<rect x="100" y="100" width="200" height="200" fill="url(#linGradient1)" />
</svg>
Actually I have left the SVG mask definition as well in the code, search Mozilla SVG specification how to use it and maybe it will also spawn more creativity with SVG simple effects.
I have a situation where I have a SVG graphic whose width is a percentage of the viewport, and whose height is fixed. Inside the graphic I have an SVG image element which I want to always fill its immediate container without distorting, much as would be achieved by using CSS background-size: fill.
How can I achieve this using my SVG?
Here's a minimal setup of the problem (and a codepen):
<svg width=100% height=300>
<rect width=100% height=300 stroke="blue" stroke-width=30 fill="transparent" />
<image xlink:href="//unsplash.it/500/300" width=100% height=100% />
</svg>
In the above snippet, I need the image to fill the entire container without distorting (in this instance, the container being the root SVG), regardless of viewport width.
I can't switch to regular HTML because the graphic I'm working on has an SVG clipping mask applied to the image element.
I found this question, which seems close to what I'm asking, but I don't think answers my question:
How can I make my embedded svg image stetch to fill a container?
In hopes of avoiding the XY problem, here's the actual SVG graphic I'm working on. And the (fixed-height, variable-width) result I'm trying to achieve:
Svg scaling with image
If you add a viewbox to the svg the svg knows how to scale.
Now adding the same viewBox ratio as the svg makes it so the svg will always have the same scale as the image.
You can always scale the image to its inside the viewBox.
Then it will always scale with the svg.
svg {
border: 2px solid black;
}
<svg width="100%" height="100%" viewBox="0 0 500 300">
<image width="500" height="300" xlink:href="//unsplash.it/500/300"/>
</svg>
To keep the height of the image unchanged, set the fixed value of the viewport height and preserveAspectRatio = "none"
<svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio = "none">
<image width="500" height="300" xlink:href="//unsplash.it/500/300"/>
</svg>
UPD
The proportions of the picture will not change, the height remains fixed when using preserveAspectRatio="xMinYMin slice"
<svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio="xMinYMin slice">
<image width="100%" height="300" xlink:href="//unsplash.it/500/300" />
</svg>
UPD2
I looked your codepen Like the idea. I've finished it with your permission. Modified some parameters
<svg width="100%" height="400" preserveAspectRatio="xMinYMin slice">
<defs>
<mask id="clipping">
<rect width="100%" height="400" fill="white"/>
<ellipse cx="50%" cy="120%" rx="75%" ry="37%"/>
</mask>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect width="100%" height="400" fill="orange" mask="url(#clipping)" transform="translate(-20 12) rotate(-2.5)" />
<image xlink:href="https://unsplash.it/1000/500" width="100%" height="400" mask="url(#clipping)" transform="translate(0 -10)" />
<rect width="100%" height="400" fill="url(#Gradient1)" mask="url(#clipping)" transform="translate(0 -10)" opacity="0.25" />
</svg>
I ended up using two SVGs and an image which used a clipping mask defined in the first SVG to clip it down. I was able to make the SVGs scale by only defining a viewbox, not a width and height. I opted to use a fixed aspect ratio instead of a fixed height, percentage width, as I had originally planned.
body > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
img {
clip-path: url(#clipper);
}
<svg viewBox="0 0 1000 500">
<defs>
<symbol id="arch" viewBox="0 0 1000 400">
<path d="M0 0 H 1000 V 400 Q 500 300, 0 400" />
</symbol>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0 0 H 1 V 1 Q .5 .75, 0 1" />
</clipPath>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#87AFBF"/>
<stop offset="100%" stop-color="#002855"/>
</linearGradient>
</defs>
<use href="#arch" width="100%" y="-40" fill="#F9B000" transform="translate(-20 12) rotate(-2.5)" />
</svg>
<img src="//unsplash.it/1000/400" alt="">
<svg viewBox="0 0 1000 500">
<use href="#arch" y="-50" fill="url(#Gradient1)" opacity="0.75" />
</svg>
CodePen
I've been trying to externalize my SVG icons to a file and referencing them with markup like <svg><use xlink:href="file.svg#icon" /></svg>. In theory this works really nicely, but different browsers have issues with rendering. All the browsers are able to render the svg correctly when referencing the symbol with <use> inside the file and opening the svg file's url directly.
In short, is there a cross-browser way to get SVG linearGradients working as fills for elements when referencing the symbols with <svg><use/></svg> in the markup?
I set up a plunker demonstrating the problem:
http://plnkr.co/edit/feKvZ7?p=preview
Simplified, the markup is like the following:
<!DOCTYPE html>
<html>
<body>
<h1>SVG sprite test</h1>
<svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="icon.svg#icon" />
</svg>
</body>
</html>
And the SVG file looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
</defs>
<symbol id="icon" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" />
</symbol>
<use id="iconuse" xlink:href="#icon" width="100" height="100" />
</svg>
This is what it looks like in the different browsers:
The symbol tag is used to hide the elements that are inside it. Elements inside the symbol are called using the <use> command by their unique indicator.
Therefore, it is better to use this method of calling individual elements rather than calling the whole symbol
In addition, elements when using <use> fall into the shadow DOM and using CSS in some cases becomes impossible
Therefore, it is better to delete all internal styles inside symbol and assign them directly to the use command
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
</defs>
<symbol id="icon" viewBox="0 0 100 100">
<circle id="circle" cx="50" cy="50" r="40" />
<rect id="rect" x="100" y="10" width="100" height="100" />
</symbol>
<use class="iconuse" xlink:href="#circle" width="100" height="100" fill="url(#gradient)" stroke="black" />
<use class="iconuse" xlink:href="#rect" width="100" height="100" fill="url(#gradient)" />
</svg>
Try next one (it's how Inkscape provide implementation of gradients):
<linearGradient id="gradient">
<stop
style="stop-color:black;"
offset="0"/>
<stop
style="stop-color:white;"
offset="1" />
</linearGradient>
...
<path
style="fill:url(#gradient); ...
I'm new to svg, I was trying to fill color in a path/circle. I was able to fill it with transition.
But I was wondering is there a way to fill the svg from left to right of the path/circle.
SVG
<svg viewBox="0 0 160 160" width="160" height="160">
<circle cx="80" cy="80" r="50" />
</svg>
CSS
circle {
transition: all 3s;
}
JS
setTimeout(function(){
$('circle').css('fill', 'red');
},300);
How to fill in particular direction, like left to right?
Codepen
As "fill left to right" can mean a lot of things, I made a few examples:
Moving a gradient:
I would suggest using the SVG <linearGradient> and <animate> tags. That way you don't need the JS or CSS.
Here is a guide to animating gradients in SVG: http://designmodo.com/animate-svg-gradients/
And one to SVG animations in general: https://css-tricks.com/guide-svg-animations-smil/
In your case (fill left to right), I would do it like this:
<svg viewBox="0 0 160 160" width="160" height="160">
<defs>
<linearGradient id="lightGradient">
<stop offset="0%" stop-color="red">
<animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" />
</stop>
<stop offset="100%" stop-color="black">
<animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" begin="3s"/>
</stop>
</linearGradient>
</defs>
<circle cx="80" cy="80" r="50" fill="url(#lightGradient)"/>
</svg>
Technically it's cheating, as the gradient doesn't actually move, but the colours on both sides change, but it looks pretty much the same. It starts out with a gradient from black to black, then the left side changes to red, giving the illusion that red moves in from the left. After the left side is red, the right side changes from black to red and it looks like the gradient is moving to fill the whole circle.
Clear border between left and right:
Probably best to use a <clip-path> for this:
<clipPath id="left-to-right">
<rect x="130" y="30" width="0" height="100" >
<animate attributeName="width" values="0;100" dur="3s" fill="freeze"/>
</rect>
</clipPath>
...
<circle cx="180" cy="80" r="50" fill="black"/>
<circle cx="180" cy="80" r="50" fill="red" clip-path="url(#left-to-right)"/>
This one draws a black circle, then draws a red circle over it inside a growing clipping area.
One circle obscuring the other:
Again, <clip-path> works for this:
<clipPath id="steady">
<circle cx="280" cy="80" r="50"/>
</clipPath>
...
<circle cx="280" cy="80" r="50" fill="red" clip-path="url(#steady)">
<animate attributeName="cx" values="180;280" dur="3s" fill="freeze"/>
</circle>
This one uses a circular clipping area and moves the second circle within it.
Here it is in Codepen: http://codepen.io/anon/pen/aOKeYQ
It's possible, but not with just using 'fill'.
You can e.g do a linear gradient fill, with two stops, one being the color you want and the other fully transparent. Then animate the offset of the second gradient stop. For an example see here.
Another way is using a clip-path, where the clip shape is a rect that is animated e.g from left to right. That can then be applied to a copy of the shape that you want to fill like this. Basically you need the starting shape (unfilled) and an ending shape (filled), where the final shape gets displayed by animating the clip-path.