Animating SVG with CSS

Size
2,867 Kb
Views
22,264

How do I make an animating svg with css?

What is a animating svg with css? How do you make a animating svg with css? This script and codes were developed by Aaron Cuddeback on 03 November 2022, Thursday.

Animating SVG with CSS Previews

Animating SVG with CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animating SVG with CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>SVG Transitions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- GEAR -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200"> <g class="gear">	<circle class="gear-bg" fill="#39ADD1" cx="200" cy="50" r="90"></circle>	<path class="gear-icon" fill="#FFFFFF" d="M231.9,10.9c-1.8-0.6-3.6-0.6-5.1,0.3L216.2,17c-1.5-0.9-3-1.2-4.2-1.8l-3.1-11.5	c-0.6-1.8-1.8-3-3.3-3.9c-1.8-0.6-3.3-0.9-5.1-0.9c-1.8,0-3.3,0.3-5.1,0.9c-0.9,0.3-1.2,0.6-1.8,1.2s-1.2,1.8-1.5,2.7l-3,11.5	c-1.5,0.3-3,1.2-4.2,1.8L174,11.3c-1.5-0.9-3.3-0.9-5.1-0.3c-2.4,0.6-3.9,2.1-4.8,3c-1.5,1.5-2.4,3-3,4.2c-0.6,1.8-0.6,3.6,0.3,5.1	l5.8,10.6c-0.6,1.2-1.5,2.7-1.8,4.2l-11.8,3.4c-0.9,0.3-1.5,0.9-2.1,1.5c-0.6,0.6-1.2,1.2-1.2,1.8c-0.9,1.5-1.2,3-1.2,4.8	c0,2.4,0.3,3.9,1.2,5.4c0.3,1.5,1.8,3,3.3,3.3l11.5,3c0.6,1.8,1.5,3.3,2.1,4.5l-5.6,10.7c-0.9,1.5-0.9,3.3-0.3,5.1s1.8,3,3,4.2	c1.2,1.2,2.7,2.1,4.2,3c1.8,0.6,3.6,0.6,5.1-0.3l10.3-6.1c1.5,0.9,3,1.2,4.2,1.8l3.4,11.8c0.6,1.8,1.8,3,3.3,3.9	c1.8,0.6,3.3,0.9,5.1,0.9c1.8,0,3.6-0.6,5.1-0.9c0.6-0.6,1.5-0.9,2.1-1.5c0.6-0.6,1.2-1.8,1.5-2.7l3-11.5c1.5-0.3,3-1.2,4.2-1.8	l10.6,5.7c1.5,0.9,3.3,0.9,5.1,0.3c1.8-0.6,3.3-2.1,4.2-3c1.5-1.5,2.4-3,3-4.2c0.6-1.8,0.6-3.6-0.3-5.1l-5.8-10.6	c0.6-1.2,1.2-3,1.8-4.2l11.5-3.1c0.9-0.3,1.8-0.6,2.7-1.5c0.6-0.6,1.2-1.2,1.2-1.8c0.6-1.8,0.9-3.3,0.9-5.1c0-1.8-0.3-3.3-0.9-5.1	c-0.6-1.8-2.1-2.7-3.9-3.3l-11.5-3c-0.3-1.5-1.2-3-1.8-4.2l5.7-10.6c0.9-1.5,0.9-3.3,0.3-5.1c-0.6-1.8-1.8-3-3-4.2	C234.6,12.4,233.1,11.5,231.9,10.9z M211.4,38.8c6.1,6,6.1,16.4,0.1,22.4s-16.3,6.1-22.4,0c-6.1-6.1-6.1-16.4-0.1-22.4	S205,32.5,211.4,38.8z"></path> </g>
</svg>
<!-- HAMMER -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200"> <g class="hammer"> <circle class="hammer-bg" fill="#FFD466" cx="200" cy="50" r="90"></circle>	<path class="hammer-icon" fill="#FFFFFF" d="M262,32.9l-6.7-6.9c-1.4-1.4-3.6-1.4-5-0.1l-2.8,2.8l-14.6-15c-7-7.2-20.3-18.5-30.1-16.4	c-1.6,0.3-5.6,3.1-5.6,3.1l19,19.5l-26.3,25.6l-1.5-1.6c-1.4-1.4-3.6-1.4-5-0.1l-39.3,38.3c-1.4,1.4-1.4,3.6-0.1,5l14.4,14.8	c1.4,1.4,3.6,1.4,5,0.1l39.3-38.3c1.4-1.4,1.4-3.6,0.1-5l-1.5-1.6l26.3-25.6l8.3,8.5l-2.8,2.8c-1.4,1.4-1.4,3.6-0.1,5l6.7,6.9	c1.4,1.4,3.6,1.4,5,0.1l17.3-16.9C263.3,36.5,263.4,34.3,262,32.9z"></path> </g>
</svg>
<!-- HEART -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200"> <g class="heart"> <circle class="heart-bg" fill="#FF8EB4" cx="200" cy="50" r="90"></circle>	<path class="heart-icon" fill="#FFFFFF" d="M251.5,45.5c0-17.8-11.1-34.6-28.9-34.6c-9,0-16.6,6.3-22.4,12.7c-5.7-6.3-13-12.7-21.8-12.7 c-17.8,0-29.9,16.8-29.9,34.6c0,24.7,37.2,51.1,52.4,51.1C217.5,96.6,251.5,67.7,251.5,45.5z"></path> </g>
</svg>
</body>
</html>
</body>
</html>

Animating SVG with CSS - Script Codes CSS Codes

/* -------------------------- BASE
--------------------------- */
body { padding-top: 5em;
}
svg { width: 33.32%; float: left;
}
.gear-bg,
.hammer-bg,
.heart-bg { -webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.gear-icon,
.hammer-icon,
.heart-icon { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; /* there is a transform bug in firefox. Can use pixels for exact middle rotation. in the SVG look at the cx and cy value. in this case 200px and 50px so it would be: transform-origin: 200px 50px; */
}
/* -------------------------- GEAR
--------------------------- */
.gear-icon { -webkit-transition: -webkit-transform .4s ease-out; transition: -webkit-transform .4s ease-out; transition: transform .4s ease-out; transition: transform .4s ease-out, -webkit-transform .4s ease-out;
}
.gear:hover .gear-icon { -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3);
}
/* -------------------------- HAMMER
--------------------------- */
.hammer-bg { stroke: #fee16e;
}
.hammer-bg:hover { fill: #feae6e; stroke-width: 8;
}
.hammer:hover .hammer-icon { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.hammer-icon { -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
/* -------------------------- HEART
--------------------------- */
.heart-bg:hover { fill: #ff5e5e;
}
.heart:hover .heart-icon { -webkit-transform: scale(1.3); transform: scale(1.3);
}
.heart-icon { -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
Animating SVG with CSS - Script Codes
Animating SVG with CSS - Script Codes
Home Page Home
Developer Aaron Cuddeback
Username gymratpacks
Uploaded November 03, 2022
Rating 3
Size 2,867 Kb
Views 22,264
Do you need developer help for Animating SVG with CSS?

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!

Aaron Cuddeback (gymratpacks) Script Codes
Create amazing love letters 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!