Possible to remove the rectangular shadow from a curve image? - css
I have created a svg shape. I need to remove the rectangular shadow. Is it possible to keep the shape without the rectangular shadow. You see the shadow by inspect this element. Here below the screenshot that I need your help.
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
background: #0097d1;
}
.inner-bg {
width: 225px;
height: 252px;
position: relative;
left: 150px;
}
.inner-bg2 {
height: 413px;
width: 354px;
}
.photo_rectangle_inverse {
width: 100%;
height: 100%;
-webkit-clip-path: url(#shape);
clip-path: url(#shape);
position: relative;
-webkit-transform: translateZ(1px)
}
.hover-bg {
opacity: 0;
transition: opacity .5s ease;
}
.inner-bg:hover .hover-bg,
.inner-bg2:hover .hover-bg {
opacity: 1;
}
<svg width="0" height="0">
<defs>
<clipPath id="shape">
<path d="M1397.715,175.794c-25.751-15.171-69.059-38.065-129.139-60.976c-67.575-25.768-142.155-46.303-221.671-61.035 C947.395,35.348,839.829,26,727.195,26C262.767,26,66.548,171.319,29.886,202.439c-2.296,27.868-7.736,113.978,0.68,229.038 C36.582,513.729,48.399,594.485,65.69,671.5c21.543,95.959,51.69,186.337,89.604,268.625 c34.129,74.072,64.323,133.951,95.024,188.442c36.672,65.09,75.123,124.286,117.55,180.97 c47.205,63.067,99.354,123.173,159.428,183.753c60.364,60.873,127.474,120.997,204.717,183.385
c76.575-61.797,143.891-122.42,205.319-184.881c60.193-61.205,112.963-122.409,161.323-187.11
c42.74-57.182,81.631-116.64,118.893-181.771c30.475-53.269,60.348-111.148,94.01-182.15
c39.049-82.368,69.602-173.132,90.807-269.769c17.023-77.58,28.095-159.092,32.906-242.272
c6.667-115.242-0.692-202.073-3.775-231.25C1424.622,192.59,1413.379,185.023,1397.715,175.794z" />
</clipPath>
</defs>
</svg>
<svg class="inner-bg" viewBox="0 0 1464 1710">
<g>
<path fill="#FFFFFF" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
</g>
<image xlink:href='http://lorempixel.com/225/262' class='photo_rectangle_inverse' width="1464px" height="1710px" />
<path class="hover-bg" fill="#0097d1" fill-opacity=".6" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
</svg>
<svg class="inner-bg2" viewBox="0 0 1464 1710">
<g>
<path fill="#FFFFFF" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
</g>
<image xlink:href='http://lorempixel.com/1464/1710' class='photo_rectangle_inverse' width="1464px" height="1710px" />
<path class="hover-bg" fill="#0097d1" fill-opacity=".6" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
</svg>
Please check also the jsfiddle
Related
Adding image to SVG path
I found some cool SVG code from and started trying things out. Now I cleared up most of the random code but now I want to add an image on the grey block, but cannot seem to get it to work. I tried a few tips from StackOverflow already like adding random classes to it and creating extra id's in the code but it still won't work. I would like to create something like this.
.slide {
position: relative;
padding: 8% 0;
}
.slide__image svg {
display: block;
width: 100%;
max-width: 560px;
margin: auto;
}
.slide__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
<svg>
<g id="p">
<path opacity=".2" d="M0 2h252s-3.3 40.7-2.7 128.3C249 216 252 272 252 272s-88-2-124.3-
2C91.3 270 0 272 0 272V0z"/>
<path fill="#f4f3f1" d="M0 0h248v270H0z"/>
<path fill="#4f5150" d="M8 10h233v203H8z"/>
</g>
<g id="polaroid">
<use xlink:href="#p" transform="rotate(15)" x="175" y="50"/>
<use xlink:href="#p" transform="rotate(-5)" x="5" y="25"/>
</g>
</svg>
Thanks for looking at the question!
Flip an svg along the x-axis so it's upside down
I am trying to flip this SVG that I found on here so that the whitespace is on the bottom and the wave is on the top, but I can't figure out how to go about it. Any suggestions?
body {
margin: 0;
}
footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
}
<footer>
<svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
<path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
<path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
</svg>
</footer>
The simplest would possibly be to use a CSS transform to rotate by 180 degrees. Since the initial value for transform-origin is 50% 50% 0 the rotation happens around the center. This avoids the need to actually modify the SVG.
body {
margin: 0;
}
footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
transform: rotate(180deg);
}
<footer>
<svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
<path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
<path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
</svg>
</footer>
Note that this doesn't actually "flip", but rotate. If flipping is more appropriate, scaleY with a value of -1 can be used as well. It scales along the transform-origin as well, so the above holds here as well.
body {
margin: 0;
}
footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
transform: scaleY(-1);
}
<footer>
<svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
<path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
<path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
</svg>
</footer>
You may use scale transformation and adjust the viewbox like this:
body {
margin: 0;
}
footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
}
<footer>
<svg viewBox="0 -70 700 110" width="100%" height="110" preserveAspectRatio="none">
<g transform="scale(1,-1)">
<path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
<path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
</g>
</svg>
</footer>
css scale translated element without moving
I would like to animate an svg element and let it scale(2). This works fine but the problem is that my element has an 'x' and 'y' value. Because of this the scale moves the element to a different position.
But I would like to scale it without moving it to a different position. The 'x' and 'y' values are defined somewhere else and I don't would like to "hardcode" the values in my css.
And I don't want to use JS it shoudl be plane css if possible.
Code:
.hello {
transition: 1s;
height: 100px;
width: 100px;
margin: 100px;
background-color: red;
transform-origin: center center;
position:relative;
}
.hello:hover {
transform: scale(4);
}
<use
id="=test"
xlink:href="#but"
x="100" y="20"
width="100%"
height="100%"
class="hello">
<title
id="title31">
I am an example toolTip
</title>
</use>
A code example can be found here:
https://jsfiddle.net/6agd23cL/3/
remove the x and y attributes and increase the translate on the parent <g> element to compensate.
.hello {
transition: 1s;
height: 100px;
width: 100px;
margin: 100px;
background-color: red;
transform-origin: center center;
position:relative;
}
.hello:hover {
transform: scale(4);
}
<div id="container" style="width: 100%; height: 100%">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
id="target"
width="3600"
height="4100"
style="top:0;left:0;"
version="1.1">
<defs
id="styles">
<g
id="but">
<style
id="style11">
.cls-1{fill:#ffc60b;}.cls-2{stroke:#231f20;stroke-width:0.5px;}.cls-3{fill:#fff;opacity:0.1;}
</style>
<rect
id="Frame"
width="12"
height="12"
x="0.25"
y="0.25"
class="cls-1"
rx="2"
ry="2" />
<circle
id="circle14"
cx="6.25"
cy="6.25"
r="4.5"
class="cls-2" />
<circle
id="Highlight"
cx="6.25"
cy="6.25"
r="3"
class="cls-3" />
</g>
</defs>
<g
id="view"
transform="translate(114.386917,29.7722462)">
<use
id="=test"
xlink:href="#but"
width="100%"
height="100%"
class="hello">
<title
id="title31">
I am an example toolTip
</title>
</use>
</g>
</svg>
</div>
</html>
Creating a believable elliptical orbiting element (plane) with SVG and CSS?
first time question poster here. After over 2 days of searching on StackOverflow & other sites, and playing on my own with CodePen, I just cannot seem to figure out how to create an orbiting path for an SVG element that isn't a circle.
Here's a copy of the closest thing I've come up with: http://codepen.io/Whatsit2yaa/pen/epbbRR?editors=100
And the code -
HTML:
<svg width="600" height="500" viewbox="0 0 600 500">
<path id="flight-path" fill="none" stroke="#CCC" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10" d="M592.7,308.1c-28.5,108.8-183,162.6-344.9,120.2C85.8,385.8-22.4,263.2,6.1,154.3
C34.6,45.5,189.1-8.3,351.1,34.2C513,76.6,621.2,199.3,592.7,308.1z"/>
<g id="plane" transform="translate(-199.4, -413.2)" scale="0.8">
<path d="M199.4,413.2L199.4,413.2c0.3,5.4,10.9,8.9,10.9,8.9l29.9,7.5l13.5,41.2l12.1,3.3l-6.6-37.8l24.6,6.8l3.9,6.2
l8,3.5l-4-14.1l10.7-10l-8.6-1.1l-6.5,3.3l-24.6-6.8l25.1-29l-12.1-3.3l-32.8,28.4l-29.7-9C213.1,411.1,202.4,408.7,199.4,413.2z" fill="#333"/>
</g>
<animateMotion
xlink:href="#plane"
dur="3s"
begin="0s"
fill="freeze"
repeatCount="indefinite"
rotate="auto-reverse"
>
<mpath xlink:href="#flight-path" />
</animateMotion>
</svg>
CSS:
html, body {
height: 100%;
}
body {
background: -webkit-linear-gradient(#FFF, #3276b1); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFF, #3276b1); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFF, #3276b1); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFF, #3276b1);
}
svg {
position: fixed;
overflow: visible;
top: 20%;
height: 60%;
left: 20%;
width: 60%;
}
Here's a pen showing what I'm trying to achieve:
http://codepen.io/guerreiro/pen/obhzc
And the code -
HTML:
<svg viewBox="0 0 160 160" width="160" height="160">
<circle cx="80" cy="80" r="50" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #FC0;
}
svg {
position: fixed;
top: 20%;
height: 60%;
left: 20%;
width: 60%;
}
I can't seem to get an SVG that isn't round to properly adjust & transform as it circles a planet in an ellipse that goes around an orbit.
I'm open to using SVG images with CSS transform if this is beyond SMIL capabilities. Any animators have advice/help for me? Thanks so much!
Colour overlay for SVG using CSS?
Is there a way to apply a colour overlay to an SVG using CSS? I have some SVGs (icons, shapes etc) that I need to be able to "tint" - adding a solid colour overlay but keep the transparency. I read about the CSS filters, but none of them cater for adding a colour over the top, only stuff like blur or desaturate.
Please check this code snippet. I hope it will be help you.
<svg width="0" height="0" class="svg-visiblity">
<defs>
<path id="hex" d="M11.5,20.9L44.3,2c3.7-2.2,8.3-2.2,12.1,0l32.8,18.9c3.7,2.2,6,6.1,6,10.4v37.8c0,4.3-2.3,8.3-6,10.4 L56.3,98.4c-3.7,2.2-8.3,2.2-12.1,0L11.5,79.5c-3.7-2.2-6-6.1-6-10.4V31.3C5.4,27,7.7,23,11.5,20.9z"/>
<clipPath id="hex-clip-200">
<use xlink:href="#hex" transform="scale(2 2)" />
</clipPath>
</defs>
</svg>
<svg class="image-200-2">
<rect class="border" width="100%" height="100%" transform="scale(1.02)" style="clip-path: url(#hex-clip-200);" /></rect>
<image xlink:href="http://placehold.it/200x200" width="200" height="200" transform="translate(2 2)" style="clip-path: url(#hex-clip-200);"></image>
</svg>
CSS
.image-200-2 {
display: inline-block;
height: 205px;
width: 205px;
}
.image-200-2 .border {
fill: rgba(0, 0, 0, 0.5);
}
.svg-visiblity {
height: 0;
opacity: 0;
position: absolute;
width: 0;
}
See here: https://jsfiddle.net/zyr8wovg/4/