I cannot understand why a smooth transition does not work - like here
<path class="st4" d="M1278.4000244,0c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5 C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634c0,0.1999512,0,0.4000244,0,0.5999756 c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512c0,0.1999512,0,0.4000244,0,0.5999756H716.5 c0,0,342.5-392.2000122,434.8000488-485.2000122s244.9000244-240.7000122,393.4000244-339.5 s128.0999756-96.7000122,278.5999756-159.2000122c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756V0H1278.4000244z">
<animate dur="2s" repeatCount="indefinite" attributeName="d"
values=" M1278.4000244,0c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5 C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634c0,0.1999512,0,0.4000244,0,0.5999756 c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512c0,0.1999512,0,0.4000244,0,0.5999756H716.5 c0,0,342.5-392.2000122,434.8000488-485.2000122s244.9000244-240.7000122,393.4000244-339.5 s128.0999756-96.7000122,278.5999756-159.2000122c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756V0H1278.4000244z;
M1278.4000244,0c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5 C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634c0,0.1999512,0,0.4000244,0,0.5999756 c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512c0,0.1999512,0,0.4000244,0,0.5999756H716.5 c248.9938354-689.5708618,423.4897461-842.3468628,541.8529053-835.0881348 c68.5238037,4.2022705,177.447876,65.6728516,286.347168,10.3881226 c51.019043-25.9007568,64.4385986-51.3814697,151.5378418-100.8539429 c28.6922607-16.2972412,61.8179932-31.2513428,127.0621338-58.3460693c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756V0 H1278.4000244z;"/>
</path>
It turns out that the animation jumps from one position to another.
As I've commented the two paths have to have the same number of points and the same commands. The values attribute has now 3 values: first path; second path; first path.
When you draw your paths in Illustrator you can count the points. This may be useful although sometimes Illustrator can change commands.
<svg viewBox="-50 -50 2000 2000">
<path class="st4"
d="M1278.4000244,0
c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5
C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634
c0,0.1999512,0,0.4000244,0,0.5999756
c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512
c0,0.1999512,0,0.4000244,0,0.5999756
H716.5
c0,0, 342.5-392.2000122, 434.8000488-485.2000122
s244.9000244 -240.7000122, 393.4000244 -339.5
s128.0999756 -96.7000122,278.5999756-159.2000122
c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756
V0
H1278.4000244z">
<animate dur="2s" repeatCount="indefinite" attributeName="d"
values="
M1278.400, 0.000
C1278.400, 0.000 975.600, 70.400 865.800, 267.900
C756.000, 465.400 818.300, 553.500 693.100, 691.400
C569.300, 827.900 477.600, 894.600 -0.300, 1022.200
C-0.300, 1040.833 -0.300, 1059.467 -0.300, 1078.100
C-0.300, 1078.300 -0.300, 1078.500 -0.300, 1078.700
C-0.200, 1079.100 -0.200, 1079.500 -0.200, 1079.900
C-0.200, 1080.100 -0.200, 1080.300 -0.200, 1080.500
C238.700, 1080.500 477.600, 1080.500 716.500, 1080.500
C716.500, 1080.500 1059.000, 688.300 1151.300, 595.300
C1243.600, 502.300 1396.200, 354.600 1544.700, 255.800
C1693.200, 157.000 1672.800, 159.100 1823.300, 96.600
C1879.800, 73.100 1907.600, 53.700 1920.400, 38.500
C1920.400, 25.667 1920.400, 12.833 1920.400, 0.000
C1706.400, 0.000 1492.400, 0.000 1278.400, 0.000 z;
M1278.400, 0.000
C1278.400, 0.000 975.600, 70.400 865.800, 267.900
C756.000, 465.400 818.300, 553.500 693.100, 691.400
C569.300, 827.900 477.600, 894.600 -0.300, 1022.200
C-0.300, 1040.833 -0.300, 1059.467 -0.300, 1078.100
C-0.300, 1078.300 -0.300, 1078.500 -0.300, 1078.700
C-0.200, 1079.100 -0.200, 1079.500 -0.200, 1079.900
C-0.200, 1080.100 -0.200, 1080.300 -0.200, 1080.500
C238.700, 1080.500 477.600, 1080.500 716.500, 1080.500
C965.494, 390.929 1139.990, 238.153 1258.353, 245.412
C1326.877, 249.614 1435.801, 311.085 1544.700, 255.800
C1724.930, 138.649 1758.056, 123.695 1823.300, 96.600
C1879.800, 73.100 1907.600, 53.700 1920.400, 38.500
C1920.400, 25.667 1920.400, 12.833 1920.400, 0.000
C1706.400, 0.000 1492.400, 0.000 1278.400, 0.000 z;
M1278.400, 0.000
C1278.400, 0.000 975.600, 70.400 865.800, 267.900
C756.000, 465.400 818.300, 553.500 693.100, 691.400
C569.300, 827.900 477.600, 894.600 -0.300, 1022.200
C-0.300, 1040.833 -0.300, 1059.467 -0.300, 1078.100
C-0.300, 1078.300 -0.300, 1078.500 -0.300, 1078.700
C-0.200, 1079.100 -0.200, 1079.500 -0.200, 1079.900
C-0.200, 1080.100 -0.200, 1080.300 -0.200, 1080.500
C238.700, 1080.500 477.600, 1080.500 716.500, 1080.500
C716.500, 1080.500 1059.000, 688.300 1151.300, 595.300
C1243.600, 502.300 1396.200, 354.600 1544.700, 255.800
C1693.200, 157.000 1672.800, 159.100 1823.300, 96.600
C1879.800, 73.100 1907.600, 53.700 1920.400, 38.500
C1920.400, 25.667 1920.400, 12.833 1920.400, 0.000
C1706.400, 0.000 1492.400, 0.000 1278.400, 0.000 z;"/>
</path>
</svg>
Related
I have an SVG in my website which displays fine on Chrome but isn't visible on Safari and Mobile Safari.
Weirdly, if I copy and paste the SVG into a Codepen page then it works fine, so I'm not able to recreate the issue publicly.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>
Setting height 100% as an attribute fixes the issue in Safari and doesn't make it the wrong size or aspect ratio.
What is going on here? Why does this work and is a safe fix? And also why is the issue not reproducible?
UPDATE: Ive now been able to recreate. Safari hides the SVG when it has a parent div with display: flex:
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/yLPgaJx
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>
</div>
If I set the container div to display: block or set a height on the SVG then it comes back.
As comments #Evanss
Also height auto doens't make the SVG appear, but height 100% does.
width="22" height="100%"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="100%" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
The snippet above doesn't render the image correctly, but if you save the svg as a separate file and open it in a browser, you'll see exactly the same image.
In the image below, the red rectangle is the border of the svg canvas with width="22" and height="100%"
As you can see, with this SVG configuration, paddings are too large. What is unacceptable and will interfere with layout
Using JavaScript isnt idea as it may cause the page to flicker
Using the JavaScript method getBBox() in the snippet console allows you to find out the physical dimensions of the svg shape
In this case, JS is not involved in the SVG rendering process and is only a reference tool.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 512" width="22" height="100%" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path id="path" fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
<script>
console.log(path.getBBox())
</script>
In the console, we can see the physical dimensions (dimensions that are given by the path of the svg shape)
"x": 0,
"y": 31.999996185302734,
"width": 448,
"height": 448
To move the image to the top left corner (this is the svgs origin) we set the value viewBox="0 32 448 448"` And to reduce the margin margins we set fixed values width="22" height="22"
Recommendations for creating and using icons
Setting both dimensions would be very time consuming as I have a lot
of icons with the same issue.
If you are using some unique icons created by a designer, then you cannot avoid the manual positioning and scaling process for each icon described above.
There is no universal solution for this case. It all depends on how the icon was drawn.
If the icon is simple, standard, then it is better to use icons drawn by professionals. There are many such resources on the web.
In this case, manual, additional processing is not required.
You can use google-fonts character font
Icons by name can be selected here
The name of your icon - Close `Fullscreen
Below is an example with minimal layout
span {
margin-left: 0.5em;
margin-top:0.5em;
transition: transform 1s ease-in-out;
}
span:hover {
transform: scale(2);
color:red;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons"> close_fullscreen </span>
You have the height of the SVG twice. In view styles hight="100%" and style="height: auto;"
safari doesn't know which style to prefer, how to scale the SVG, so it doesn't display the image.
Leave one style: width="22" height="auto"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="auto" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
Update
Try setting the values of `viewBox="0 32 448 448" according to the dimensions shown by the JS method getBBox()
And also specify fixed width and height viewport width="22" height="22"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 448" width="22" height="22" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path id="path" fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
<script>
console.log(path.getBBox())
</script>
In my case, adding the svg attributes width="40" and height="auto" did the trick for Safari to show the svgs correctly:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.8 503.8" width="40" height="auto">
<style>.st0{fill:currentcolor}</style>
<path d="M251.9 45.4c67.3 0 75.3.2 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.6a79.6 79.6 0 0 1 29 18.9 78.2 78.2 0 0 1 18.8 28.9c3.5 8.9 7.6 22.3 8.7 46.8 1.2 26.6 1.5 34.6 1.5 101.8s-.3 75.3-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8a83.4 83.4 0 0 1-47.8 47.8c-8.9 3.5-22.2 7.6-46.8 8.7-26.5 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.5-1.1-37.9-5.2-46.8-8.7a78.2 78.2 0 0 1-28.9-18.8 79.6 79.6 0 0 1-18.9-29c-3.4-8.9-7.5-22.2-8.6-46.8-1.3-26.5-1.5-34.5-1.5-101.8s.2-75.2 1.5-101.8c1.1-24.5 5.2-37.9 8.6-46.8a78.4 78.4 0 0 1 18.9-28.9 78.4 78.4 0 0 1 28.9-18.9c8.9-3.4 22.3-7.5 46.8-8.6 26.6-1.3 34.6-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.8 1.5S102.9 7 86.9 13.2a124.9 124.9 0 0 0-44.6 29.1 123.6 123.6 0 0 0-29.1 44.6c-6.2 16-10.5 34.3-11.7 61.2S0 183.5 0 251.9s.3 77 1.5 103.9 5.5 45.1 11.7 61.1a125.3 125.3 0 0 0 29.1 44.7 123.4 123.4 0 0 0 44.6 29c16 6.2 34.3 10.5 61.2 11.7s35.4 1.5 103.8 1.5 77-.2 103.9-1.5 45.1-5.5 61.1-11.7a128.6 128.6 0 0 0 73.7-73.7c6.2-16 10.5-34.3 11.7-61.1s1.5-35.5 1.5-103.9-.2-77-1.5-103.8-5.5-45.2-11.7-61.2a123.4 123.4 0 0 0-29-44.6 123.1 123.1 0 0 0-44.7-29.1c-16-6.2-34.3-10.5-61.1-11.7S320.3 0 251.9 0Z"></path>
<path d="M251.9 122.6a129.4 129.4 0 1 0 129.4 129.3 129.3 129.3 0 0 0-129.4-129.3Zm0 213.3a84 84 0 1 1 84-84 84 84 0 0 1-84 84Z"></path>
<circle cx="386.4" cy="117.4" r="30.2"></circle>
</svg>
Not later than yesterday, I managed to make an animated SVG which works flawlessly in Chrome. I tried to open it in Safari today and the animation was not working. Is there a solution to this? I have tried to do some research but most of them show CSS3 and the d:path CSS method does not work either and is actually worse because nothing shows up.
Here's my code
<svg width="1279" height="650" viewBox="0 0 1279 650" xmlns="http://www.w3.org/2000/svg">
<path d="M-138 -167.889C-138 -167.889 2002 -494.389 1020.73 -167.889C39.4558 158.611 1111.22 305.526 942.746 516.955C681.205 845.177 -138 458.649 -138 458.649V -167.889Z"
fill="#000000">
<!-- First shape and last shape in values are the same -->
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="12s"
values="
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1923.96 -760.278 1020.73 -167.889C117.5 424.5 1248.99 269.909 942.746 516.954C636.5 764 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1989.46 -765.777 1020.73 -167.889C52 430 1302.99 226.348 942.746 516.955C582.5 807.561 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
">
</animate>
</path>
</svg>
I have tried to do some research but most of them show CSS3 and the
d:path CSS method does not work either and is actually worse because
nothing shows up.
Please see browser support d: path animations.
Unfortunately, this does not work in the specified browsers, including Safari.
Let's hope to see better support in the near future.
This answer will not solve your problem with CSS3 path animations as it is not possible, but it will make it easier with SVG animations that work in all modern browsers, including Safari.
Specifying path data: the d property:
For animation, two d property values can only be interpolated smoothly
when the path data strings contain have the same structure, (i.e.
exactly the same number and types of path data commands which are in
the same order). If an animation is specified and the lists of path
data commands do not have the same structure, then the values must be
interpolated using the discrete animation type.
To fulfill these requirements, you can use this technique
Step #1
First you need to get the shape of the curve at the starting position:
Step #2
Then, by moving the anchor points of the curve in the vector editor, we get the final shape of the curve:
Step #3
Next, we write a command to animate the curve:
<animate attributeName="d" values="path1;path2;path1" />, where
path1 - Curve shape at the start
path2 - Finish curve shape
as #Kaiido said in the comments try not to allow extra spaces before the semicolon
svg {
width:40%;
height:40%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:4;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="770" height="770" viewBox="0 0 770 770" preserveAspectRatio="xMinYMin meet" >
<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate attributeName="d"
dur="4s"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatcount="indefinite"
/>
</path>
</svg>
Option with background image and shadow
.container {
width:75%;
height:75%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
-webkit-filter: drop-shadow(4px 4px 1px black);
filter: drop-shadow(4px 4px 1px black);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 770 770" preserveAspectRatio="none" >
<image xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
</image>
<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
dur="6s"
begin="0s"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatCount="indefinite"
/>
</path>
</svg>
</div>
Border animation plus whole block size animation
.container {
width:75%;
height:75%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 770 770" preserveAspectRatio="none" >
<defs>
<filter id='shadow'>
<feGaussianBlur in='SourceAlpha' stdDeviation='2' />
<feOffset dx='3' dy='3' result='blur' />
<feMerge>
<feMergeNode in='blur' />
<feMergeNode in='SourceGraphic' />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
</image>
<path filter="url(#shadow)" d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
dur="6s"
begin="0s;an_t.end"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatcount="1"
/>
<animateTransform id="an_t" attributeName="transform" type="scale" dur="12s" begin="an_d.end" values="1;0.5;0.5;1" />
</path>
</svg>
</div>
I have successfully run an OLS model using the statsmodels package in python. However, the model pics one variable as an intercept, and does not include it in the results of interactions. Specifically, I have 5 levels in the "Meal_Cat" category below, and the model picks one of them ("Low" level) and treats it as an intercept. That is okay, but the problem is that I am unable to see its interactions with other categories (such as a Low by Group interaction).
See below for how the model is set up:
model = ols('Cost ~ C(Meal_Cat)*C(Group)*C(Region) + Age + Gender', data= Mealcat_DF).fit()
# Seeing if the overall model is significant
print(f"Overall model F({model.df_model: .0f},{model.df_resid: .0f}) = {model.fvalue: .3f}, p = {model.f_pvalue: .4f}")
model.summary()
I was wondering if anyone can suggest for a way to include all terms from the model in the interaction summary.
If your variable is already string or category variable, you just try the following.
import pandas as pd
import seaborn as sns
import statsmodels.formula.api as smf
df = sns.load_dataset('tips')
formula = 'tip ~ sex*smoker*day + total_bill'
model = smf.ols(formula, data=df)
results = model.fit()
print(results.summary())
OLS Regression Results
==============================================================================
Dep. Variable: tip R-squared: 0.485
Model: OLS Adj. R-squared: 0.449
Method: Least Squares F-statistic: 13.35
Date: Mon, 20 Jan 2020 Prob (F-statistic): 8.29e-25
Time: 14:21:24 Log-Likelihood: -344.02
No. Observations: 244 AIC: 722.0
Df Residuals: 227 BIC: 781.5
Df Model: 16
Covariance Type: nonrobust
=========================================================================================================
coef std err t P>|t| [0.025 0.975]
---------------------------------------------------------------------------------------------------------
Intercept 0.9917 0.357 2.777 0.006 0.288 1.695
sex[T.Female] -0.0731 0.506 -0.144 0.885 -1.071 0.925
smoker[T.No] -0.0427 0.398 -0.107 0.915 -0.827 0.741
day[T.Fri] -0.4549 0.487 -0.933 0.352 -1.415 0.506
day[T.Sat] -0.4662 0.381 -1.224 0.222 -1.217 0.284
day[T.Sun] -0.2880 0.423 -0.681 0.497 -1.121 0.545
sex[T.Female]:smoker[T.No] -0.1423 0.593 -0.240 0.811 -1.311 1.026
sex[T.Female]:day[T.Fri] 0.8553 0.737 1.161 0.247 -0.597 2.307
sex[T.Female]:day[T.Sat] 0.2319 0.605 0.383 0.702 -0.960 1.424
sex[T.Female]:day[T.Sun] 1.0867 0.772 1.407 0.161 -0.435 2.608
smoker[T.No]:day[T.Fri] 0.1224 0.905 0.135 0.893 -1.660 1.905
smoker[T.No]:day[T.Sat] 0.6258 0.480 1.303 0.194 -0.320 1.572
smoker[T.No]:day[T.Sun] 0.2552 0.505 0.506 0.614 -0.739 1.250
sex[T.Female]:smoker[T.No]:day[T.Fri] -0.2185 1.303 -0.168 0.867 -2.787 2.350
sex[T.Female]:smoker[T.No]:day[T.Sat] -0.4487 0.759 -0.591 0.555 -1.944 1.046
sex[T.Female]:smoker[T.No]:day[T.Sun] -0.7027 0.892 -0.788 0.431 -2.460 1.054
total_bill 0.1078 0.008 13.951 0.000 0.093 0.123
==============================================================================
Omnibus: 29.744 Durbin-Watson: 2.154
Prob(Omnibus): 0.000 Jarque-Bera (JB): 60.768
Skew: 0.616 Prob(JB): 6.38e-14
Kurtosis: 5.112 Cond. No. 629.
==============================================================================
Warnings:
[1] Standard Errors assume that the covariance matrix of the errors is correctly specified.
I am applying the quantile function on the duration column of my data frame:
a=df.groupby('version')[['duration']].quantile([.25, .5, .75])
a
duration
version
4229 0.25 1451.00
0.50 1451.00
0.75 1451.00
6065 0.25 213.75
0.50 426.50
0.75 639.25
9209 0.25 386.50
0.50 861.00
0.75 866.00
2304 0.25 664.50
0.50 669.00
0.75 736.50
6389 0.25 1.00
0.50 797.00
0.75 832.00
I am wondering how do I re-shape/re-pivot the above data frame, so the new data frame (yes, it has to be a data frame format) could look like:
version duration_Q1 duration_Q2 duration_Q3
4429 1451.00 1451.00 1451.00
6065 213.75 426.50 639.25
9209 386.50 861.00 866.00
2304 664.50 669.00 736.50
6389 1.00 797.00 832.00
Thanks!
You could use unstack, followed by some renaming operations
a = pd.DataFrame('duration': {(2304L, 0.25): 1565.6861959516361,
(2304L, 0.5): 446.4769649280514,
(2304L, 0.75): 701.8254115357969,
(4229L, 0.25): 1868.982390749203,
(4229L, 0.5): 242.36201172579996,
(4229L, 0.75): 789.482292226787,
(6065L, 0.25): 1421.9585894685038,
(6065L, 0.5): 357.04491735326343,
(6065L, 0.75): 169.78973203074895,
(6389L, 0.25): 1789.1550141153925,
(6389L, 0.5): 516.9365429825862,
(6389L, 0.75): 1830.6493228794639,
(9209L, 0.25): 1129.853279993191,
(9209L, 0.5): 1759.1258334115485,
(9209L, 0.75): 1499.0498929925702}}
)
pvt = a.unstack()
pvt.columns = pvt.columns.droplevel(0)
pvt.rename(columns={0.25:'duration_Q1',0.5:'duration_Q2',0.75:'duration_Q3'},inplace=True)
duration_Q1 duration_Q2 duration_Q3
version
2304 1565.686196 446.476965 701.825412
4229 1868.982391 242.362012 789.482292
6065 1421.958589 357.044917 169.789732
6389 1789.155014 516.936543 1830.649323
9209 1129.853280 1759.125833 1499.049893
Set of time-series data are plotted with Matplotlib as:
import matplotlib.pyplot as plt
%matplotlib inline
def WillR(ohlc, window):
high, low, close = ohlc['High'], ohlc['Low'], ohlc['Close']
R = (np.nanmax(high, axis=0) - close) / (np.nanmax(high, axis=0) - np.nanmin(low, axis=0)) * -100
return R
ohlc = df[::-1]
R = WillR(ohlc, 14)
xAxis = ohlc.index
fig = plt.figure(figsize=(18,9), dpi=100)
ax = fig.add_axes([0.0, 0.6, 1.0, 0.6])
plt.ylabel('Williams '+'%R', fontsize = 16)
ax.xaxis.grid(color='grey', linestyle=':')
ax.yaxis.grid(color='grey', linestyle=':')
ax.plot(R, color='k', alpha=0.8, linewidth=1.2)
ax.axhline(-20, color='r', linewidth=0.8)
ax.axhline(-50, color='k', linestyle='dashed', linewidth=1.2)
ax.axhline(-80, color='g', linewidth=0.8)
ax.fill_between(xAxis, R, -20, where=(R >= -20), facecolor='r', edgecolor='r', alpha=0.5)
ax.fill_between(xAxis, R, -80, where=(R <= -80), facecolor='g', edgecolor='g', alpha=0.5)
In the "Williams %R" graph, the area above "-20" line is to be filled in red and below "-80" green. I could not get the bound areas filled completely - see Figure 1:
I have also tried adding the argument "interpolate=True" and the result is still unsatisfactory - see Figure 2:
How do I make it work correctly? Thanks
Sample data for df as follows:
Date Open High Low Close
Date
2017-06-27 2017-06-27 10.75 10.850 10.665 10.70
2017-06-26 2017-06-26 10.57 10.740 10.570 10.69
2017-06-23 2017-06-23 10.59 10.710 10.500 10.63
2017-06-22 2017-06-22 10.56 10.720 10.530 10.65
2017-06-21 2017-06-21 10.75 10.750 10.500 10.53
2017-06-20 2017-06-20 10.88 10.925 10.780 10.81
2017-06-19 2017-06-19 10.77 10.920 10.760 10.82
2017-06-16 2017-06-16 10.74 10.910 10.740 10.78
2017-06-15 2017-06-15 10.86 10.930 10.690 10.76
2017-06-14 2017-06-14 10.96 11.040 10.910 11.02
2017-06-13 2017-06-13 10.57 10.930 10.570 10.93
2017-06-09 2017-06-09 10.59 10.650 10.500 10.57
2017-06-08 2017-06-08 10.28 10.590 10.280 10.57
2017-06-07 2017-06-07 10.35 10.420 10.290 10.35
2017-06-06 2017-06-06 10.66 10.700 10.280 10.38
2017-06-05 2017-06-05 10.80 10.850 10.560 10.70
2017-06-02 2017-06-02 11.32 11.390 11.190 11.19
2017-06-01 2017-06-01 11.26 11.330 11.160 11.20
2017-05-31 2017-05-31 11.22 11.400 11.190 11.27
2017-05-30 2017-05-30 11.10 11.260 11.070 11.23
2017-05-29 2017-05-29 11.36 11.370 11.045 11.08
2017-05-26 2017-05-26 11.55 11.590 11.320 11.36
2017-05-25 2017-05-25 11.62 11.670 11.455 11.66
2017-05-24 2017-05-24 11.67 11.755 11.590 11.62
2017-05-23 2017-05-23 11.77 11.835 11.590 11.64
2017-05-22 2017-05-22 12.06 12.110 11.800 11.83
2017-05-19 2017-05-19 12.15 12.235 11.990 12.03
2017-05-18 2017-05-18 12.00 12.130 11.910 12.13
2017-05-17 2017-05-17 12.28 12.300 12.120 12.14
2017-05-16 2017-05-16 12.23 12.385 12.220 12.30
2017-05-15 2017-05-15 12.10 12.255 12.030 12.22
2017-05-12 2017-05-12 12.30 12.300 12.050 12.12
2017-05-11 2017-05-11 12.30 12.445 12.270 12.34
2017-05-10 2017-05-10 11.99 12.415 11.950 12.25
2017-05-09 2017-05-09 12.07 12.100 11.730 11.79
2017-05-08 2017-05-08 12.14 12.230 12.060 12.10
2017-05-05 2017-05-05 12.24 12.250 12.020 12.04
2017-05-04 2017-05-04 12.23 12.270 12.050 12.14
2017-05-03 2017-05-03 12.43 12.460 12.200 12.23
2017-05-02 2017-05-02 12.44 12.470 12.310 12.46
2017-05-01 2017-05-01 12.25 12.440 12.230 12.44
2017-04-28 2017-04-28 12.47 12.480 12.230 12.32
2017-04-27 2017-04-27 12.39 12.515 12.380 12.50
2017-04-26 2017-04-26 12.03 12.510 12.030 12.37
2017-04-24 2017-04-24 12.00 12.055 11.920 12.03
2017-04-21 2017-04-21 11.88 11.990 11.840 11.88
2017-04-20 2017-04-20 11.78 11.840 11.710 11.80
2017-04-19 2017-04-19 11.70 11.745 11.610 11.74
2017-04-18 2017-04-18 11.95 11.950 11.605 11.74
2017-04-13 2017-04-13 11.95 12.010 11.920 11.95
2017-04-12 2017-04-12 12.05 12.050 11.945 12.01
2017-04-11 2017-04-11 11.95 12.140 11.945 12.08
2017-04-10 2017-04-10 11.79 11.930 11.780 11.91
2017-04-07 2017-04-07 11.83 11.830 11.690 11.78
2017-04-06 2017-04-06 11.85 11.870 11.740 11.78
2017-04-05 2017-04-05 12.06 12.140 11.800 11.96
2017-04-04 2017-04-04 12.03 12.160 11.930 12.07
2017-04-03 2017-04-03 12.14 12.180 11.860 11.98
2017-03-30 2017-03-30 12.01 12.230 11.970 12.14
2017-03-29 2017-03-29 11.99 12.050 11.900 12.03
The data needs to be sorted. Then the option interpolate=True will provide the required plot.
u = u""" Date Date1 Open High Low Close
2017-06-27 2017-06-27 10.75 10.850 10.665 10.70
2017-06-26 2017-06-26 10.57 10.740 10.570 10.69
2017-06-23 2017-06-23 10.59 10.710 10.500 10.63
2017-06-22 2017-06-22 10.56 10.720 10.530 10.65
2017-06-21 2017-06-21 10.75 10.750 10.500 10.53
2017-06-20 2017-06-20 10.88 10.925 10.780 10.81
2017-06-19 2017-06-19 10.77 10.920 10.760 10.82
2017-06-16 2017-06-16 10.74 10.910 10.740 10.78
2017-06-15 2017-06-15 10.86 10.930 10.690 10.76
2017-06-14 2017-06-14 10.96 11.040 10.910 11.02
2017-06-13 2017-06-13 10.57 10.930 10.570 10.93
2017-06-09 2017-06-09 10.59 10.650 10.500 10.57
2017-06-08 2017-06-08 10.28 10.590 10.280 10.57
2017-06-07 2017-06-07 10.35 10.420 10.290 10.35
2017-06-06 2017-06-06 10.66 10.700 10.280 10.38
2017-06-05 2017-06-05 10.80 10.850 10.560 10.70
2017-06-02 2017-06-02 11.32 11.390 11.190 11.19
2017-06-01 2017-06-01 11.26 11.330 11.160 11.20
2017-05-31 2017-05-31 11.22 11.400 11.190 11.27
2017-05-30 2017-05-30 11.10 11.260 11.070 11.23
2017-05-29 2017-05-29 11.36 11.370 11.045 11.08
2017-05-26 2017-05-26 11.55 11.590 11.320 11.36
2017-05-25 2017-05-25 11.62 11.670 11.455 11.66
2017-05-24 2017-05-24 11.67 11.755 11.590 11.62
2017-05-23 2017-05-23 11.77 11.835 11.590 11.64
2017-05-22 2017-05-22 12.06 12.110 11.800 11.83
2017-05-19 2017-05-19 12.15 12.235 11.990 12.03
2017-05-18 2017-05-18 12.00 12.130 11.910 12.13
2017-05-17 2017-05-17 12.28 12.300 12.120 12.14
2017-05-16 2017-05-16 12.23 12.385 12.220 12.30
2017-05-15 2017-05-15 12.10 12.255 12.030 12.22
2017-05-12 2017-05-12 12.30 12.300 12.050 12.12
2017-05-11 2017-05-11 12.30 12.445 12.270 12.34
2017-05-10 2017-05-10 11.99 12.415 11.950 12.25
2017-05-09 2017-05-09 12.07 12.100 11.730 11.79
2017-05-08 2017-05-08 12.14 12.230 12.060 12.10
2017-05-05 2017-05-05 12.24 12.250 12.020 12.04
2017-05-04 2017-05-04 12.23 12.270 12.050 12.14
2017-05-03 2017-05-03 12.43 12.460 12.200 12.23
2017-05-02 2017-05-02 12.44 12.470 12.310 12.46
2017-05-01 2017-05-01 12.25 12.440 12.230 12.44
2017-04-28 2017-04-28 12.47 12.480 12.230 12.32
2017-04-27 2017-04-27 12.39 12.515 12.380 12.50
2017-04-26 2017-04-26 12.03 12.510 12.030 12.37
2017-04-24 2017-04-24 12.00 12.055 11.920 12.03
2017-04-21 2017-04-21 11.88 11.990 11.840 11.88
2017-04-20 2017-04-20 11.78 11.840 11.710 11.80
2017-04-19 2017-04-19 11.70 11.745 11.610 11.74
2017-04-18 2017-04-18 11.95 11.950 11.605 11.74
2017-04-13 2017-04-13 11.95 12.010 11.920 11.95
2017-04-12 2017-04-12 12.05 12.050 11.945 12.01
2017-04-11 2017-04-11 11.95 12.140 11.945 12.08
2017-04-10 2017-04-10 11.79 11.930 11.780 11.91
2017-04-07 2017-04-07 11.83 11.830 11.690 11.78
2017-04-06 2017-04-06 11.85 11.870 11.740 11.78
2017-04-05 2017-04-05 12.06 12.140 11.800 11.96
2017-04-04 2017-04-04 12.03 12.160 11.930 12.07
2017-04-03 2017-04-03 12.14 12.180 11.860 11.98
2017-03-30 2017-03-30 12.01 12.230 11.970 12.14
2017-03-29 2017-03-29 11.99 12.050 11.900 12.03"""
import io
import matplotlib.pyplot as plt
import pandas as pd
import numpy as np
#%matplotlib inline
def WillR(ohlc, window):
high, low, close = ohlc['High'], ohlc['Low'], ohlc['Close']
R = (np.nanmax(high, axis=0) - close) / (np.nanmax(high, axis=0) - np.nanmin(low, axis=0)) * -100
return R
df = pd.read_csv(io.StringIO(u), delim_whitespace=True, index_col=0, parse_dates=True)
ohlc = df[::-1]
R = WillR(ohlc, 14)
xAxis = ohlc.index
fig = plt.figure(figsize=(18,9), dpi=100)
ax = plt.subplot()
plt.ylabel('Williams '+'%R', fontsize = 16)
ax.xaxis.grid(color='grey', linestyle=':')
ax.yaxis.grid(color='grey', linestyle=':')
ax.plot(R, color='k', alpha=0.8, linewidth=1.2)
ax.axhline(-20, color='r', linewidth=0.8)
ax.axhline(-50, color='k', linestyle='dashed', linewidth=1.2)
ax.axhline(-80, color='g', linewidth=0.8)
ax.fill_between(xAxis, R, -20, where=(R >= -20), facecolor='r', edgecolor='r', alpha=0.5, interpolate=True)
ax.fill_between(xAxis, R, -80, where=(R <= -80), facecolor='g', edgecolor='g', alpha=0.5, interpolate=True)
plt.show()