bottle svg

by PhilQ

HTML

<svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 100 406.02">
<defs>
	<filter id="shadow" x="-100%" y="-100%" width="300%" height="300%">
		<feGaussianBlur in="SourceAlpha" stdDeviation="5" out="blurOut" />
		<!--
		<feMerge>
			<feMergeNode in="blurOut" />
			<feMergeNode in="SourceGraphic" />
		</feMerge>
		-->
	</filter>
</defs>
<!--
translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor)
-->
<g filter="url(#shadow)" opacity="0.3"><g transform="translate(12, 5) scale(0.3, 0.98)"><use xlink:href="#bottle"></use></g></g><g id="bottle" transform="translate(20, 40) scale(0.8)"><path fill="#4F484F" d="M100,145.352v229.369v5.553v15.746c0,5.523-8.954,10-20,10H20c-11.046,0-20-4.477-20-10v-15.746v-5.553 V145.352h0.031C0.021,145.083,0,144.817,0,144.547c0-13.545,12.792-25.146,30.959-30.007V30.439 c-1.066-0.917-1.758-2.26-1.758-3.778V13.378c0-1.518,0.691-2.861,1.758-3.778V5c0-2.761,4.478-5,10-5h18.082c5.522,0,10,2.239,10,5 v4.6c1.067,0.917,1.758,2.26,1.758,3.778v13.283c0,1.518-0.69,2.861-1.758,3.778v84.102C87.209,119.401,100,131.002,100,144.547 c0,0.27-0.021,0.536-0.031,0.804H100z" /></g></svg>

CSS

svg {
	margin-left: 200px;
	margin-top: 150px;
	height: 400px;
	width: auto;
	transform-origin: 0% 0%;
	transform: rotate(-90deg) translate(10px, 20px);
	//background: red;
}