SVG Logo Animation

Developer
Shayne Trosdahl
Size
2,807 Kb
Views
12,144
  1. SVG Logo Animation Previews
  2. SVG Logo Animation HTML Codes
  3. SVG Logo Animation CSS Codes

How do I make an svg logo animation?

Just a simple svg css animaton for a logo.. What is a svg logo animation? How do you make a svg logo animation? This script and codes were developed by Shayne Trosdahl on 18 November 2022, Friday.

SVG Logo Animation Previews
IQ Test

SVG Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Logo Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <svg class="logo" align="center" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <g class="phs-orbit"> <rect display="inline" fill="#17648E" width="500" height="500"/> <path class="phs-ring" fill="#ffffff" d="M479.437,271.492c-10.876,117.032-109.613,208.955-229.439,208.955 c-127.069,0-230.45-103.375-230.45-230.45c0-127.069,103.38-230.45,230.45-230.45c119.153,0,217.468,90.894,229.263,206.982 c0.905-0.11,1.824-0.173,2.759-0.173c1.354,0,2.677,0.125,3.965,0.353C474.245,106.849,372.891,12.871,249.998,12.871 c-130.75,0-237.126,106.376-237.126,237.126c0,130.75,106.376,237.131,237.126,237.131c123.584,0,225.378-95.045,236.167-215.871 c-1.345,0.249-2.729,0.386-4.146,0.386C481.146,271.644,480.285,271.589,479.437,271.492z"/> <path class="phs-ring-ball" fill="#FFFFFF" d="M497.732,249c0-7.738-5.597-14.166-12.962-15.468c-0.894-0.158-1.812-0.245-2.751-0.245 c-0.648,0-1.286,0.044-1.914,0.12c-7.774,0.945-13.799,7.563-13.799,15.593c0,8.071,6.087,14.718,13.921,15.608 c0.589,0.066,1.186,0.104,1.792,0.104c0.983,0,1.943-0.095,2.877-0.268C492.199,263.094,497.732,256.694,497.732,249z"/> </g> <path fill="#FFFFFF" d="M180,225.529v12.162c0,14.968-6.896,23.309-21.587,23.309H151v35h-14v-94h21.413 C173.104,202,180,210.561,180,225.529z M151,216v31h7.413c4.678,0,7.587-1.691,7.587-8.374v-14.033 c0-6.683-2.909-8.594-7.587-8.594H151z"/> <path fill="#FFFFFF" d="M202,296h-15v-94h15v41h17v-41h14v94h-14v-40h-17V296z"/> <path fill="#FFFFFF" d="M264.155,201.351c14.3,0,21.845,8.542,21.845,23.511V228h-14v-4.074c0-6.683-2.834-9.222-7.512-9.222 c-4.666,0-7.425,2.539-7.425,9.222c0,19.245,28.696,22.853,28.696,49.582c0,14.957-7.441,23.511-21.886,23.511 c-14.422,0-21.874-8.554-21.874-23.511V268h14v6.433c0,6.683,2.827,9.088,7.516,9.088c4.667,0,7.557-2.405,7.557-9.088 c0-19.234-28.646-22.843-28.646-49.571C242.427,209.893,249.854,201.351,264.155,201.351z"/> <path fill="#FFFFFF" d="M291,272.361L329.926,181H353v91h10v20h-10v24h-21v-24h-41V272.361z M332,272v-49.434L310.892,272H332z"/> <path fill="none" d="M249.998,19.548c-127.069,0-230.45,103.38-230.45,230.45c0,127.075,103.38,230.45,230.45,230.45 c119.826,0,218.563-91.923,229.439-208.955c-11.288-1.282-20.061-10.861-20.061-22.492c0-11.571,8.682-21.108,19.885-22.47 C467.466,110.441,369.15,19.548,249.998,19.548z"/> </svg>
</div>
</body>
</html>

SVG Logo Animation - Script Codes CSS Codes

body{ background-color: #17648E;	}	.wrapper{ width: 50%; height: 50%; margin: 0 auto;	}	.logo{ margin: 0 auto; text-align: center;	}	.phs-orbit{ -webkit-animation: spin 3.6s infinite ease; -webkit-transform-origin: center center;	}	@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg) scale(0.9)} 25% { -webkit-transform: rotate(90deg) scale(1.0)} 50% { -webkit-transform: rotate(180deg) scale(0.9)} 75% { -webkit-transform: rotate(270deg) scale(1.0)} 100% { -webkit-transform: rotate(360deg) scale(0.9)}	}
SVG Logo Animation - Script Codes
SVG Logo Animation - Script Codes
Home Page Home
Developer Shayne Trosdahl
Username Trozdol
Uploaded November 18, 2022
Rating 3.5
Size 2,807 Kb
Views 12,144
Do you need developer help for SVG Logo Animation?

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!

Shayne Trosdahl (Trozdol) Script Codes
Name
Sencha Touch Button Icon Size CSS
Test Prof Mode
How to Set Sencha Touch Chart Legend Labels
1em Sizing Side-by-Side Comparison
Viewport Text Width CSS
Simple Photo Button Example for Friends Reference
Sencha Touch Grid Text Wrap Test
Turn Off Smart Quotes in Mac OS X
A Pen by Shayne Trosdahl
List Item
Create amazing Facebook ads 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!