Related
I want to show images using a mask. I tried the css clip-path but because the browser support is that poor I want to use an svg for clipping. My question is how can i change the size of the mask on mousover?
Like here:
I am using this code at the moment:
<svg>
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" xlink:href="model_detail.jpg"></image>
</g>
</svg
In your case, since you need to resize both the circle and the clipped image, you may scale the svg element on hover like so:
svg {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(1);
transition: transform 0.5s;
}
svg:hover {
transform: scale(1.5);
}
<svg viewBox="0 0 200 200" width="200">
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"></image>
</g>
</svg>
Please observe that I've added a viewBox and a width attribute to the svg. If you don't declare the viewBox and the width the svg element will have a size of 300px/150px and the part of the circle that falls outside the svg canvas will be cuted off.
UPDATE
The OP is commenting
I don't want to scale the image, just the mask. Is that possible?
This is how I would do it: In the next example I'm using transitions to scale the circle when you mouse over the svg element:
#c{transform: scale(1);
transition: transform 0.5s;}
svg:hover #c {
transform: scale(1.5);
}
Next comes a working example:
svg {
border: 1px solid;
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#c{transform: scale(1);
transition: transform 0.5s;}
svg:hover #c {
transform: scale(1.5);
}
<svg viewBox="-150 -150 300 300" width="200">
<defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<circle id="c" r="100" />
</clipPath>
</defs>
<!--group containing the image with clipping applied-->
<image clip-path="url(#clip)" id="img" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="-150" y="-150" width="300" height="300"></image>
</svg>
You could do it easily with JavaScript, adding an eventlistener onMouseOver over a class.
However, if you need CSS, you can an animation that will do it,like this.
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>
<div class="zoom"></div>
I'm working on animations here I have an SVG image I'm trying to move image like a wave continuously. I have tried using gsap and css still not getting. Can anyone suggest me any help will be appreciated
GSAP
TweenMax.to("#turbwave", 8, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});
#keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}
.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<svg id="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="780" viewBox="0 0 1920 780">
<g>
<g opacity=".75">
<path fill="#ffefdd" d="M518.416 278.813c100.975 408.098 513.434 328.466 588.907 253.974 75.473-74.493 153.228-259.973 324.949-282.534 154.635-20.315 317.211-182.93 487.728-78.482v453.068c-264.98 2.452-323.019-161.187-601.137 25.146-320.667 214.84-339.51 105.56-508.484 75.563S535.477 828.256 326.51 643.775C188.975 522.356 98.538 508.728 0 535.407V0h260.293c113.729 39.308 218.825 119.99 258.123 278.813z"/>
</g>
</g>
</svg>
The reason why you cannot currently animate your SVG like the one in the answer you linked is because they fake the wave by just translating the wave and having each side match up. If you remove the set width in the example on that answer you can clearly see this:
#keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}
.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<div class="container">
<svg id="wave" version="1.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 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>
In order to animate your SVG like a wave it will be more complex because the ends don't match up to each other. You likely need to use an SVG animation tool like GSAP's MorphSVG (which is a paid plugin, but you can try it out free on CodePen).
With MorphSVG I'd recommend making 2 or 3 different SVG and then animating between them using MorphSVG. There are several examples of how to do this on the GreenSock website.
For more about MorphSVG see the GreenSock page for it.
For Wave SVG you may use this:
<svg id="wave" viewbox="0 0 100 15">
<path fill="#fff" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />
<path fill="#fff" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>
im using a svg clip-path as mask for an image.
Now i want an inner border inside it on hover.
So i made a second clip-path for hover but the transition doesnt affect it.
I want the border comming from the sides (reducing zoom/negative scaling).
Here you can see what i want without working animation/transition:
body {
background: #ccc;
}
.clip-svg {
position: relative;
display: block;
height: 400px;
width: 300px;
background-position: center center;
background-size: auto 100%;
clip-path: url(#Emblem);
transition: 0.4s all ease;
}
.clip-svg:hover {
clip-path: url(#Emblem2);
}
<div class="clip-svg" style="background-image: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>
<svg width="0" height="0">
<defs>
<clipPath id="Emblem">
<path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
</clipPath>
<clipPath id="Emblem2">
<path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
l3.4,0.5V240z"/>
</clipPath>
</defs>
</svg>
<br/>
Image: https://www.pexels.com/...d-tablet-864994/
Thanks in advance
I would consider two layers each one using a clip-path and I would control the opacity:
body {
background: #ccc;
}
.clip-svg {
position: relative;
display: inline-block;
height: 400px;
width: 300px;
}
.clip-svg::before,
.clip-svg::after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-position: center center;
background-size: auto 100%;
background-image: var(--i);
transition: 0.8s all ease;
}
.clip-svg::before {
clip-path: url(#Emblem2);
}
.clip-svg::after {
clip-path: url(#Emblem);
}
.clip-svg:hover::after {
opacity:0;
}
<div class="clip-svg" style="--i: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>
<svg width="0" height="0">
<defs>
<clipPath id="Emblem">
<path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
</clipPath>
<clipPath id="Emblem2">
<path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
l3.4,0.5V240z"/>
</clipPath>
</defs>
</svg>
I don't see a way to achieve what you want using clip paths on an HTML element. You can only replace one clip path with another in CSS. You can't interpolate between two of them.
However it is fairly easy to do, if you are okay with moving the image into an SVG. Then you can do whatever you want with the inner border.
Note however, with this solution, the inner border is not a clip path, so it doesn't make the image transparent. I don't know if that is important to you or not. It should be possible to do that if you really need it to.
body {
background: #ccc;
}
.clip-svg .emblem2-ref {
transform-origin: 150px 200px;
transform: scale(1.2, 1.2);
transition: 0.4s all ease;
}
.clip-svg:hover .emblem2-ref {
transform: scale(1, 1);
}
#Emblem2 {
fill: #ccc;
}
<!-- Clip path and inner border definitions. Can be included once and used by multiple SVGs -->
<svg width="0" height="0">
<defs>
<clipPath id="Emblem">
<path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
</clipPath>
<path id="Emblem2"
d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z
M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
l3.4,0.5V240z"/>
</defs>
</svg>
<!-- Will need one of these SVGs for every image you want to display -->
<svg width="300" height="400" class="clip-svg">
<g clip-path="url(#Emblem)">
<image width="300" height="400" preserveAspectRatio="xMidYMid slice"
xlink:href="https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"/>
<use class="emblem2-ref" xlink:href="#Emblem2"/>
</g>
</svg>
<br/>
Image: https://www.pexels.com/...d-tablet-864994/
I need help in this SVG animation I'm doing.
It features a doughnut chart animating. The maroon-colored part is supposed to rotate and fill up the space, similar to a infographic.
The problem is, the maroon-colored part is only half of the chart and it is hidden under the main chart, which then rotate to 'fill up' the chart but it cannot go any further than 50% of the chart because it then gets hidden again.
You'll understand more when playing with the rotation of the svg.
Any advice/solution to how I can alter my codes/SVG in Illustrator? (I have zero knowledge on XML so I wouldn't know what the XML codes mean.)
<figure>
<path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8
c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/>
<path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0
C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
<path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
</svg>
Tryout: http://codepen.io/anon/pen/QdMrBY
Something like this?
#ring
{
width: 20%;
}
#right
{
}
#left-top
{
}
#left-bottom
{
fill: maroon;
transform: rotate(180deg);
transform-origin: 100% 50%;
transition: 1s;
}
#ring {
animation: spin infinite 10s linear;
}
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<figure>
<svg version="1.1" id="ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 390.5 383" style="enable-background:new 0 0 390.5 383;" xml:space="preserve">
<path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8
c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/>
<path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0
C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
<path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
</svg>
</figure>
I looked at the existing question related yo my query but could not get help.
I am Using basic animation of css3. Below is the fiddle..
https://jsfiddle.net/gamerVinod/d21c6bcb/5/
Below is the css
#keyframes rotate {
from {
transform: rotate(0deg);
transform-origin: center;
}
to {
transform: rotate(359deg);
transform-origin: center;
}
}
.rotate-element {
animation: rotate 1s infinite linear;
}
Whenever i use SVG and rotate it then it bounces slightly.
I am not able to find out whether it is due to SVG path or anything else.Can someone please let me know the reason of it and how to fix it?
As #Ouroborus said, bezier curves can only approximate circular arcs. If you need to rotate those shapes then, unless your shape is carefully and accurately crafted, you are likely to see some shimmy.
You could use the arc (A) path element instead. But you don't need to. By far the simplest solution here is to use an actual <circle>.
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.rotate-element {
animation: rotate 1s infinite linear;
}
.parent{
height: 200px;
width: 200px;
background: red;
display: flex;
align-items:center;
text-align: center;
}
.child{
height: 200px;
width: 200px;
}
<div class="parent">
<svg class="child rotate-element" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<circle cx="20" cy="20" r="13.25" opacity="0.2" fill="none"
stroke="#000" stroke-width="3"/>
<circle cx="20" cy="20" r="13.25" fill="none"
stroke="#000" stroke-width="3"
stroke-dasharray="6 80"/>
</svg>
</div>
Here I am using two circles with thick strokes (lines) and transparent fill. The one at the back is semi-transparent (like the original SVG). The one on top has only part of it's stroke drawn by using a dash array.