Salt Shaker CSS-Animated SVG

Developer
Anghelos Coulon
Size
4,125 Kb
Views
32,384
  1. Salt Shaker CSS-Animated SVG Previews
  2. Salt Shaker CSS-Animated SVG HTML Codes
  3. Salt Shaker CSS-Animated SVG CSS Codes

How do I make an salt shaker css-animated svg?

What is a salt shaker css-animated svg? How do you make a salt shaker css-animated svg? This script and codes were developed by Anghelos Coulon on 31 August 2022, Wednesday.

Salt Shaker CSS-Animated SVG Previews
IQ Test

Salt Shaker CSS-Animated SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Salt Shaker CSS-Animated SVG</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{ background-color:whitesmoke;
}
.container{ position:absolute; margin:auto; top:0;right:0;bottom:0;left:0; width:400px; max-width:80%; height:550px; max-height:100%;
}
svg{ position:absolute; top:0; left:0; width:100%; height:100%;
}
.st0{opacity:0.5;fill:#F5F5F5;}	.st1{clip-path:url(#SVGID_2_);fill:#EAEAEA;stroke:#EAEAEA;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:1,6;}	.st2{clip-path:url(#SVGID_2_);fill:#FFFFFF;}	.st3{clip-path:url(#SVGID_2_);}	.st4{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}	.st5{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:1.003,6.0182;}	.st6{fill:#FFFFFF;}	.st7{opacity:0.4;fill:#EAEAEA;}	.st8{fill:none;stroke:#C9C9C9;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:10;}	.st9{fill:none;stroke:#C9C9C9;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}	.st10{fill:#C9C9C9;}	.st11{fill:#B5B5B5;}	.st12{fill:#939393;}	.st13{clip-path:url(#SVGID_4_);fill:none;stroke:#B5B5B5;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}	.st14{fill:#FFFFFF;stroke:#D3D3D3;stroke-miterlimit:10;}	@-webkit-keyframes upanddown{	0%{ -webkit-transform:rotate(0deg);}	100%{ -webkit-transform:rotate(10deg);}	}	@keyframes upanddown{	0%{ -ms-transform:rotate(0deg);	transform:rotate(0deg);}	100%{ -ms-transform:rotate(10deg);	transform:rotate(10deg);}	}	@-webkit-keyframes sel{	0%{opacity:0;	-webkit-transform:translate(8px, -10px);}	20%{opacity:1;}	50%{opacity:1;}	100%{opacity:0;	-webkit-transform:translate(-8px, 10px);}	}	@keyframes sel{	0%{opacity:0;	transform:translate(10px, -10px);}	20%{opacity:1;}	50%{opacity:1;}	100%{opacity:0;	transform:translate(-10px, 10px);}	}	#saliere{	-webkit-transform-origin: 339px 226px;	transform-origin: 339px 226px;	-webkit-animation: upanddown 0.5s ease-out infinite alternate;	animation: upanddown 0.5s ease-out infinite alternate;	}	#salt{	-webkit-animation: sel 1s linear -0.18s infinite;	animation: sel 1s linear -0.18s infinite;	} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <div class="container"> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="331px" height="379px" viewBox="0 0 331 379" style="enable-background:new 0 0 331 379;" xml:space="preserve">
<g id="saliere">	<path class="st0" d="M209.6,46c0,0-96.9,45.2-96.1,133.9c0,0,11.3,42.2,65.4,45.3c0,0,79.5-21.7,96.1-121.9c0,0-3.9-3.9-4.9-20.5	c0,0-21.8-21-27.5-26.2C233.3,54.1,209.6,46,209.6,46z"/>	<g>	<defs>	<path id="SVGID_1_" d="M209.6,46c0,0-96.9,45.2-96.1,133.9c0,0,11.3,42.2,65.4,45.3c0,0,79.5-21.7,96.1-121.9	c0,0-3.9-3.9-4.9-20.5c0,0-21.8-21-27.5-26.2C233.3,54.1,209.6,46,209.6,46z"/>	</defs>	<clipPath id="SVGID_2_">	<use xlink:href="#SVGID_1_" style="overflow:visible;"/>	</clipPath>	<path class="st1" d="M119.6,122.3c7.9-7,142.6-16,159.9,13.4l-12.8,19.9l-158.7-12.3C108.1,143.3,111.7,129.3,119.6,122.3z"/>	<path class="st2" d="M118.8,116.3c0,0,111.3,30.1,180.6,13.2L181.3,240.4l-79.1-57.1L118.8,116.3z"/>	<g class="st3">	<g>	<path class="st4" d="M118.8,116.3c0,0,0.2,0,0.5,0.1"/>	<path class="st5" d="M125.1,117.9c24,5.9,111.4,25.3,170.8,12.4"/>	<path class="st4" d="M298.9,129.7c0.2,0,0.3-0.1,0.5-0.1"/>	</g>	</g>	</g>	<g>	<circle class="st6" cx="169.8" cy="119.4" r="2"/>	<circle class="st6" cx="194.8" cy="116.9" r="2.4"/>	<circle class="st6" cx="187.2" cy="124" r="1.9"/>	<circle class="st6" cx="210.8" cy="122.4" r="1.9"/>	<circle class="st6" cx="219.6" cy="128.3" r="2.3"/>	<circle class="st6" cx="235.3" cy="122.1" r="2.3"/>	<circle class="st6" cx="233.1" cy="132.4" r="2.3"/>	<circle class="st6" cx="191" cy="130.1" r="2"/>	<circle class="st6" cx="204.8" cy="129.3" r="2.1"/>	<circle class="st6" cx="257.8" cy="127.4" r="1.9"/>	</g>	<path class="st7" d="M202.6,65.9c0,0,32.7-6.9,58.4,31.9c0,0-32.3,77.9-94.6,115.2l8.6,12.3c0,0,74.7-10.3,100-119.7	c0,0-6-9.2-4.9-22.7l-27.5-26.2l-33-10.6c0,0-100.8,52.2-96.1,133.9l13.8,5.8C127.3,185.7,145.8,94.7,202.6,65.9z"/>	<path class="st8" d="M209.6,46c0,0-96.9,45.2-96.1,133.9c0,0,11.3,42.2,65.4,45.3c0,0,79.5-21.7,96.1-121.9c0,0-3.9-3.9-4.9-20.5	c0,0-21.8-21-27.5-26.2C233.3,54.1,209.6,46,209.6,46z"/>	<path class="st9" d="M130.2,175.6c20.6-88.4,72.4-109.8,72.4-109.8"/>	<path class="st9" d="M261,97.8c0,0-25.7,69.7-82.9,105.1"/>	<path class="st10" d="M111.2,183.2l-8.6,12.7c0,0-2.3,2.3-2.5,5.6c0,0-3.7,2.5-5.4,5.3c-1.8,2.7-6.9,8.2-5.4,15.1	c1.6,7.2,26.7,38.1,62.7,41.9c0,0,6.9-1.4,9.3-6.5c2.5-5.1,0.6-6.1,0.6-6.1s6.9-1.6,4.8-7.1c0,0,1.9,0.3,5.7-5.1	c3.8-5.3,5.7-10.1,5.7-10.1s5.4-10.1-26.6-32.2S111.2,183.2,111.2,183.2z"/>	<ellipse transform="matrix(0.8192 0.5735 -0.5735 0.8192 159.7644 -26.0332)" class="st11" cx="121.2" cy="240.4" rx="38.7" ry="11.1"/>	<g>	<ellipse transform="matrix(0.8192 0.5735 -0.5735 0.8192 160.3758 -24.8587)" class="st12" cx="119.6" cy="241.9" rx="4.8" ry="1.4"/>	<ellipse transform="matrix(0.8192 0.5735 -0.5735 0.8192 155.3239 -25.9605)" class="st12" cx="118.8" cy="233.4" rx="4.8" ry="1.4"/>	<ellipse transform="matrix(0.8192 0.5735 -0.5735 0.8192 150.8639 -18.0406)" class="st12" cx="104" cy="230.3" rx="4.8" ry="1.4"/>	<ellipse transform="matrix(0.8192 0.5735 -0.5735 0.8192 158.5219 -20.5348)" class="st12" cx="111.8" cy="241.2" rx="4.8" ry="1.4"/>	<ellipse transform="matrix(0.8192 0.5735 -0.5735 0.8192 167.0439 -33.555)" class="st12" cx="136.7" cy="248.2" rx="4.8" ry="1.4"/>	<ellipse transform="matrix(0.8192 0.5735 -0.5735 0.8192 168.7375 -29.5853)" class="st12" cx="131.3" cy="252.8" rx="4.8" ry="1.4"/>	</g>	<g>	<defs>	<path id="SVGID_3_" d="M111.2,183.2l-8.6,12.7c0,0-2.3,2.3-2.5,5.6c0,0-3.7,2.5-5.4,5.3c-1.8,2.7-7.4,8.4-4.7,15.2	c2.7,6.8,24.3,40.4,62,41.8c0,0,6.9-1.4,9.3-6.5c2.5-5.1,0.6-6.1,0.6-6.1s6.9-1.6,4.8-7.1c0,0,1.9,0.3,5.7-5.1	c3.8-5.3,5.7-10.1,5.7-10.1s5.4-10.1-26.6-32.2S111.2,183.2,111.2,183.2z"/>	</defs>	<clipPath id="SVGID_4_">	<use xlink:href="#SVGID_3_" style="overflow:visible;"/>	</clipPath>	<path class="st13" d="M161.9,251.1c0,0-5.2-17.9-32.4-31.3"/>	<path class="st13" d="M166.7,243.4c0,0-0.8-10.8-27-29.3c-29.8-19.9-39.6-12.7-39.6-12.7"/>	</g>
</g>
<g id="salt">	<g>	<circle class="st14" cx="73.5" cy="276.5" r="3.2"/>	<circle class="st14" cx="88" cy="255.8" r="2.8"/>	<circle class="st14" cx="57.8" cy="315.3" r="3"/>	<circle class="st14" cx="41.2" cy="349.9" r="3"/>	<circle class="st14" cx="117.8" cy="277.5" r="2.6"/>	<circle class="st14" cx="82.2" cy="343.5" r="2.6"/>	<circle class="st14" cx="116.3" cy="313" r="2.8"/>	<circle class="st14" cx="46.7" cy="284.1" r="3"/>	<circle class="st14" cx="90.5" cy="303.6" r="2.7"/>	</g>
</g>
</svg> </div>
</body>
</body>
</html>

Salt Shaker CSS-Animated SVG - Script Codes CSS Codes

body{ background-color:whitesmoke;
}
.container{ position:absolute; margin:auto; top:0;right:0;bottom:0;left:0; width:400px; max-width:80%; height:550px; max-height:100%;
}
svg{ position:absolute; top:0; left:0; width:100%; height:100%;
}
.st0{opacity:0.5;fill:#F5F5F5;}	.st1{clip-path:url(#SVGID_2_);fill:#EAEAEA;stroke:#EAEAEA;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:1,6;}	.st2{clip-path:url(#SVGID_2_);fill:#FFFFFF;}	.st3{clip-path:url(#SVGID_2_);}	.st4{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}	.st5{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:1.003,6.0182;}	.st6{fill:#FFFFFF;}	.st7{opacity:0.4;fill:#EAEAEA;}	.st8{fill:none;stroke:#C9C9C9;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:10;}	.st9{fill:none;stroke:#C9C9C9;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}	.st10{fill:#C9C9C9;}	.st11{fill:#B5B5B5;}	.st12{fill:#939393;}	.st13{clip-path:url(#SVGID_4_);fill:none;stroke:#B5B5B5;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}	.st14{fill:#FFFFFF;stroke:#D3D3D3;stroke-miterlimit:10;}	@-webkit-keyframes upanddown{	0%{ -webkit-transform:rotate(0deg);}	100%{ -webkit-transform:rotate(10deg);}	}	@keyframes upanddown{	0%{ -ms-transform:rotate(0deg);	transform:rotate(0deg);}	100%{ -ms-transform:rotate(10deg);	transform:rotate(10deg);}	}	@-webkit-keyframes sel{	0%{opacity:0;	-webkit-transform:translate(8px, -10px);}	20%{opacity:1;}	50%{opacity:1;}	100%{opacity:0;	-webkit-transform:translate(-8px, 10px);}	}	@keyframes sel{	0%{opacity:0;	transform:translate(10px, -10px);}	20%{opacity:1;}	50%{opacity:1;}	100%{opacity:0;	transform:translate(-10px, 10px);}	}	#saliere{	-webkit-transform-origin: 339px 226px;	transform-origin: 339px 226px;	-webkit-animation: upanddown 0.5s ease-out infinite alternate;	animation: upanddown 0.5s ease-out infinite alternate;	}	#salt{	-webkit-animation: sel 1s linear -0.18s infinite;	animation: sel 1s linear -0.18s infinite;	}
Salt Shaker CSS-Animated SVG - Script Codes
Salt Shaker CSS-Animated SVG - Script Codes
Home Page Home
Developer Anghelos Coulon
Username anguo
Uploaded August 31, 2022
Rating 3
Size 4,125 Kb
Views 32,384
Do you need developer help for Salt Shaker CSS-Animated SVG?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anghelos Coulon (anguo) Script Codes
Name
CSS Gas Flame Animation
Ripple
Pure CSS Giftbox
Sheji
Rotating oven - Animated SVG
Pistachio skin remover machine, animated SVG
Night reading mode
Pistachio pattern
Donate Button With CSS Animated God Rays
Lemon
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!