Loading...

Animar un SVG con CSS

Explicación de cómo crear el logo de frontendtools.net utilizando un SVG y keyframes CSS.

HTML

<xml version="1.0" encoding="utf-8">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2692.5 491" xml:space="preserve">
<g>
	<rect id="rotate" x="103" y="103" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -101.8961 245.999)" class="st0" width="286" height="286"/>
	<g>
		<g class="letters">
			<g class="frontend-letters">
				<path class="st1" d="M522.7,334.8c-3.8-3.8-5.7-8.8-5.7-14.9V172.4c0-6.1,1.7-10.9,5-14.2s8.1-5,14.2-5h90.7
					c6.7,0,11.6,1.3,14.7,3.9c3.1,2.6,4.8,6.8,4.8,12.4c0,5.4-1.6,9.5-4.8,12.1c-3.1,2.6-8.1,4-14.7,4h-69.3v42.7h64
					c6.7,0,11.6,1.3,14.7,3.9s4.8,6.8,4.8,12.4c0,5.4-1.6,9.5-4.8,12.1c-3.1,2.6-8.1,4-14.7,4h-64V320c0,6.3-1.8,11.4-5.4,15
					c-3.6,3.7-8.4,5.5-14.7,5.5C531.4,340.5,526.4,338.6,522.7,334.8z"/>
				<path class="st1" d="M751.7,210.5c3.1,2.8,4.6,6.8,4.6,12.3c0,5.8-1.4,10.1-4.2,12.9c-2.8,2.8-7.8,4.6-15,5.3l-7.9,0.8
					c-9.7,1.1-16.7,4.2-21,9.5s-6.4,12.1-6.4,20.3V322c0,6.1-1.9,10.8-5.7,14c-3.8,3.1-8.4,4.8-14.1,4.8c-5.8,0-10.6-1.6-14.4-4.8
					c-3.8-3.1-5.7-7.8-5.7-14v-96.7c0-5.8,1.9-10.3,5.8-13.4c3.8-3.1,8.5-4.8,14-4.8c5.3,0,9.7,1.5,13.2,4.6s5.3,7.4,5.3,12.8v7.1
					c3.1-7.5,8-13.4,14.4-17.4c6.4-4.1,13.4-6.3,21-6.8l3.7-0.2C744.4,206.5,748.7,207.7,751.7,210.5z"/>
				<path class="st1" d="M791.1,332.7c-10.4-5.5-18.3-13.4-23.9-23.5c-5.6-10.1-8.4-22-8.4-35.7s2.8-25.6,8.4-35.7
					c5.6-10.1,13.6-17.9,23.9-23.3s22.4-8.1,36.1-8.1c13.7,0,25.7,2.8,36.1,8.1c10.4,5.4,18.3,13.2,23.9,23.3
					c5.6,10.1,8.4,22,8.4,35.7s-2.8,25.6-8.4,35.7c-5.6,10.1-13.6,17.9-23.9,23.5c-10.4,5.5-22.4,8.3-36.1,8.3
					S801.5,338.3,791.1,332.7z M856.2,273.6c0-12.4-2.5-21.8-7.5-27.9c-5-6.1-12.2-9.2-21.5-9.2c-19.3,0-29,12.4-29,37.2
					s9.7,37.2,29,37.2S856.2,298.3,856.2,273.6z"/>
				<path class="st1" d="M1035.7,219.9c7.5,9.1,11.4,22.7,11.4,41v60.9c0,5.8-1.8,10.4-5.4,13.7c-3.6,3.4-8.4,5-14.7,5
					c-6.1,0-11-1.7-14.5-5s-5.3-7.9-5.3-13.7v-59c0-8.8-1.6-15.2-4.9-19.3c-3.2-4.1-8.3-6.1-15.1-6.1c-8.3,0-14.9,2.6-19.9,7.9
					c-5,5.3-7.5,12.3-7.5,21.1v55.3c0,5.8-1.8,10.4-5.3,13.7c-3.5,3.4-8.4,5-14.5,5s-11.1-1.7-14.7-5s-5.4-7.9-5.4-13.7V225
					c0-5.4,1.9-9.8,5.7-13.2c3.8-3.3,8.7-5,14.7-5c5.4,0,9.9,1.6,13.3,4.9c3.5,3.2,5.1,7.4,5.1,12.5v3.7c4.5-7.1,10.5-12.4,17.8-16
					c7.3-3.7,15.5-5.5,24.6-5.5C1016.6,206.4,1028.1,210.9,1035.7,219.9z"/>
				<path class="st1" d="M1160.3,315.5c2.5,2.3,3.7,5.6,3.7,10c0,5.1-2,9-6.1,11.6s-9.8,3.7-17.4,3.1l-7.4-0.5
					c-30.8-2.5-46.1-18.5-46.1-48.2v-52.2h-10.5c-5.8,0-10.2-1.3-13.2-3.8s-4.5-6.2-4.5-10.9c0-4.9,1.5-8.7,4.5-11.2s7.4-3.8,13.2-3.8
					h10.5V189c0-5.8,1.8-10.4,5.4-13.7s8.4-5,14.7-5c6.1,0,11,1.7,14.5,5c3.5,3.4,5.3,7.9,5.3,13.7v20.6h18.4c12,0,17.9,5,17.9,15
					c0,4.8-1.5,8.4-4.5,10.9s-7.4,3.8-13.4,3.8h-18.4v55.1c0,5.3,1.2,9.3,3.7,12c2.5,2.8,6.1,4.3,10.8,4.6l7.4,0.5
					C1154,311.9,1157.9,313.2,1160.3,315.5z"/>
				<path class="st1" d="M1200.5,333.9c-3.4-3.3-5-8.1-5-14.2V172.4c0-6.1,1.7-10.9,5-14.2s8.1-5,14.2-5h93.3c13,0,19.5,5.3,19.5,15.8
					c0,10.7-6.5,16-19.5,16h-72.5v43.5h67.2c13,0,19.5,5.4,19.5,16c0,10.5-6.5,15.8-19.5,15.8h-67.2V307h72.5c13,0,19.5,5.4,19.5,16
					c0,10.5-6.5,15.8-19.5,15.8h-93.3C1208.5,339,1203.8,337.3,1200.5,333.9z"/>
				<path class="st1" d="M1464.3,219.9c7.5,9.1,11.4,22.7,11.4,41v60.9c0,5.8-1.8,10.4-5.4,13.7c-3.6,3.4-8.4,5-14.7,5
					c-6.1,0-11-1.7-14.5-5s-5.3-7.9-5.3-13.7v-59c0-8.8-1.6-15.2-4.9-19.3c-3.2-4.1-8.3-6.1-15.1-6.1c-8.3,0-14.9,2.6-19.9,7.9
					c-5,5.3-7.5,12.3-7.5,21.1v55.3c0,5.8-1.8,10.4-5.3,13.7s-8.4,5-14.5,5s-11.1-1.7-14.7-5s-5.4-7.9-5.4-13.7V225
					c0-5.4,1.9-9.8,5.7-13.2c3.8-3.3,8.7-5,14.7-5c5.4,0,9.9,1.6,13.3,4.9c3.5,3.2,5.1,7.4,5.1,12.5v3.7c4.5-7.1,10.5-12.4,17.8-16
					c7.3-3.7,15.5-5.5,24.6-5.5C1445.2,206.4,1456.7,210.9,1464.3,219.9z"/>
				<path class="st1" d="M1630.7,156.8c3.8,3.4,5.7,7.8,5.7,13.2v151.8c0,5.6-1.8,10.1-5.4,13.6s-8.4,5.1-14.4,5.1s-10.7-1.7-14.4-5.1
					c-3.6-3.5-5.4-8-5.4-13.6v-2.1c-3.8,6.7-9.4,11.9-16.5,15.7c-7.1,3.8-15.1,5.7-24.1,5.7c-11.1,0-21-2.8-29.6-8.6
					c-8.7-5.7-15.4-13.7-20.3-23.9c-4.8-10.3-7.2-22.1-7.2-35.5s2.4-25.1,7.2-35.2c4.8-10.1,11.5-17.9,20.2-23.3
					c8.6-5.4,18.5-8.1,29.8-8.1c8.8,0,16.7,1.8,23.9,5.5c7.1,3.7,12.6,8.9,16.5,15.6v-58.3c0-5.3,1.8-9.5,5.3-12.7
					c3.5-3.1,8.1-4.8,14-4.8C1622,151.8,1627,153.5,1630.7,156.8z M1589.3,301.1c5-6.4,7.5-15.6,7.5-27.6s-2.5-21.1-7.5-27.4
					c-5-6.3-12.2-9.5-21.5-9.5s-16.5,3.1-21.6,9.4c-5.1,6.2-7.7,15.3-7.7,27c0,12,2.5,21.2,7.7,27.8c5.1,6.6,12.3,9.9,21.6,9.9
					C1577.1,310.7,1584.4,307.5,1589.3,301.1z"/>
			</g>
			<g class="tools-letters">
				<path class="st1" d="M1728.8,337.2c-2-2-3-4.7-3-8.1V171.5h-56.6c-3.1,0-5.6-0.8-7.4-2.4c-1.8-1.6-2.6-3.8-2.6-6.8
					s0.8-5.3,2.6-6.8c1.8-1.6,4.2-2.4,7.4-2.4h135.2c3.1,0,5.6,0.8,7.4,2.4c1.8,1.6,2.6,3.8,2.6,6.8s-0.8,5.3-2.6,6.8
					c-1.8,1.6-4.2,2.4-7.4,2.4h-56.6v157.6c0,3.4-1,6-2.9,8.1c-1.9,2-4.6,3-7.9,3C1733.5,340.3,1730.8,339.3,1728.8,337.2z"/>
				<path class="st1" d="M1836.6,332.6c-9.2-5.4-16.3-13.2-21.3-23.3c-5-10.1-7.5-21.8-7.5-35.2c0-13.4,2.5-25.1,7.5-35.2
					c5-10.1,12.1-17.9,21.3-23.3c9.2-5.4,19.9-8.1,32-8.1s22.9,2.8,32.2,8.1c9.3,5.4,16.5,13.2,21.5,23.3s7.5,21.8,7.5,35.2
					s-2.5,25.1-7.5,35.2s-12.2,17.9-21.5,23.3s-20,8.1-32.2,8.1S1845.9,338,1836.6,332.6z M1897.8,310.6c6.8-8.4,10.1-20.5,10.1-36.5
					c0-15.7-3.5-27.7-10.3-36.2s-16.5-12.8-29-12.8s-22.1,4.3-29,12.8c-6.8,8.5-10.3,20.6-10.3,36.2c0,15.8,3.4,27.9,10.1,36.4
					c6.8,8.4,16.5,12.7,29.1,12.7C1881.1,323.1,1891,318.9,1897.8,310.6z"/>
				<path class="st1" d="M1982.9,332.6c-9.2-5.4-16.3-13.2-21.3-23.3c-5-10.1-7.5-21.8-7.5-35.2c0-13.4,2.5-25.1,7.5-35.2
					c5-10.1,12.1-17.9,21.3-23.3c9.2-5.4,19.9-8.1,32-8.1s22.9,2.8,32.2,8.1c9.3,5.4,16.5,13.2,21.5,23.3s7.5,21.8,7.5,35.2
					s-2.5,25.1-7.5,35.2s-12.2,17.9-21.5,23.3s-20,8.1-32.2,8.1C2002.8,340.7,1992.1,338,1982.9,332.6z M2044,310.6
					c6.8-8.4,10.1-20.5,10.1-36.5c0-15.7-3.5-27.7-10.3-36.2s-16.5-12.8-29-12.8s-22.1,4.3-29,12.8c-6.8,8.5-10.3,20.6-10.3,36.2
					c0,15.8,3.4,27.9,10.1,36.4c6.8,8.4,16.5,12.7,29.1,12.7S2037.3,318.9,2044,310.6z"/>
				<path class="st1" d="M2111,337.5c-2-1.8-3-4.5-3-7.8V162.4c0-3.3,1-5.9,3-7.8c2-1.8,4.6-2.8,7.8-2.8c3,0,5.5,0.9,7.5,2.8
					c2,1.8,3,4.5,3,7.8v167.3c0,3.4-1,5.9-3,7.8c-2,1.8-4.5,2.8-7.5,2.8C2115.6,340.3,2113,339.3,2111,337.5z"/>
				<path class="st1" d="M2189.2,337.9c-7.3-1.9-13.7-4.7-19.3-8.1c-3.1-2.1-5.4-4.1-6.8-5.9c-1.4-1.8-2-4.1-2-6.8
					c0-2.3,0.7-4.1,2-5.7c1.3-1.5,3-2.2,5.1-2.2s5.1,1.3,9.2,4c5.3,3.1,10.5,5.7,15.7,7.5s11.7,2.8,19.3,2.8c9.5,0,16.9-1.7,22.1-5
					c5.3-3.3,7.9-8.1,7.9-14.5c0-3.8-1-7-2.9-9.4s-5.3-4.5-10-6.3c-4.8-1.8-11.7-3.8-20.8-5.7c-15.4-3.3-26.6-7.8-33.2-13.4
					c-6.7-5.6-10-13.3-10-23c0-7.5,2.1-14.2,6.3-20s10.1-10.4,17.5-13.7s16-5,25.4-5c6.8,0,13.5,0.9,19.9,2.8c6.4,1.8,12.1,4.5,17,7.8
					c6,4.2,9,8.6,9,13.2c0,2.3-0.7,4.2-2.1,5.8c-1.4,1.6-3.1,2.4-5,2.4c-2.1,0-5.3-1.5-9.5-4.5c-4.9-3.1-9.6-5.6-14-7.4
					c-4.4-1.8-9.8-2.6-16.3-2.6c-8.3,0-14.9,1.8-19.9,5.5s-7.5,8.6-7.5,14.7c0,3.8,0.9,7,2.8,9.4c1.8,2.4,4.9,4.5,9.2,6.3
					s10.5,3.7,18.6,5.4c12,2.6,21.2,5.5,27.8,8.7c6.6,3.1,11.3,7.1,14.1,11.6c2.8,4.6,4.2,10.4,4.2,17.4c0,11.1-4.7,20-14,26.7
					c-9.3,6.8-21.6,10.1-36.9,10.1C2204.2,340.8,2196.5,339.8,2189.2,337.9z"/>
			</g>
			<g class="net-letters">
				<path class="st1" d="M2293.3,336.6c-2.3-2.3-3.4-5.2-3.4-8.8s1.1-6.5,3.4-8.8c2.3-2.3,5.1-3.4,8.5-3.4c3.2,0,6,1.1,8.3,3.4
					c2.3,2.3,3.4,5.2,3.4,8.8s-1.1,6.5-3.4,8.8c-2.3,2.3-5,3.4-8.3,3.4C2298.4,340.1,2295.6,338.9,2293.3,336.6z"/>
				<path class="st1" d="M2452.1,260.2v71.9c0,2.4-0.7,4.3-2,5.7c-1.4,1.4-3.2,2.2-5.6,2.2c-2.4,0-4.3-0.7-5.7-2.2
					c-1.4-1.4-2.2-3.3-2.2-5.7v-70.9c0-12.2-2.5-21.1-7.4-26.7c-4.9-5.6-12.7-8.4-23.4-8.4c-12.2,0-22,3.7-29.4,11.2
					c-7.4,7.5-11.1,17.5-11.1,30v64.8c0,2.4-0.7,4.3-2,5.7c-1.4,1.4-3.2,2.2-5.6,2.2c-2.4,0-4.3-0.7-5.7-2.2
					c-1.4-1.4-2.2-3.3-2.2-5.7V220.8c0-2.4,0.7-4.3,2.2-5.7c1.4-1.4,3.3-2.2,5.7-2.2c2.2,0,4,0.7,5.3,2c1.4,1.4,2,3.2,2,5.6v16
					c3.9-7.8,9.5-13.8,16.9-17.9c7.4-4.2,15.9-6.2,25.6-6.2C2437.2,212.4,2452.1,228.4,2452.1,260.2z"/>
				<path class="st1" d="M2591,314.3c1.1,1.3,1.7,2.8,1.7,4.4c0,3.7-2.9,7.4-8.6,10.9c-12.2,7.3-25.1,10.9-38.6,10.9
					c-18.8,0-33.6-5.7-44.5-17c-10.8-11.4-16.3-26.9-16.3-46.8c0-12.7,2.4-23.9,7.2-33.7c4.8-9.7,11.6-17.3,20.3-22.6
					c8.7-5.3,18.8-8,30.1-8c15.9,0,28.5,5.1,37.8,15.4c9.2,10.3,13.9,24.4,13.9,42.3c0,3-0.7,5.3-2,6.7c-1.4,1.4-3.6,2.2-6.6,2.2
					h-84.7c0.5,15.6,4.6,27.5,12.2,35.6c7.6,8.1,18.4,12.2,32.3,12.2c7.3,0,13.4-1,18.3-2.9c4.9-1.9,10.2-4.5,15.8-7.8
					c3.7-2.5,6.4-3.8,7.9-3.8C2588.6,312.4,2589.9,313,2591,314.3z M2513.8,236.3c-7.1,7.5-11.4,17.9-12.7,31.3h78.6
					c-0.3-13.6-3.7-24-10.2-31.4c-6.4-7.4-15.5-11.1-27.2-11.1C2530.5,225.2,2521,228.9,2513.8,236.3z"/>
				<path class="st1" d="M2686.7,333.7c0,2-0.8,3.6-2.3,4.8c-1.5,1.2-4,1.7-7.4,1.5l-7.1-0.5c-12.9-0.8-22.4-4.8-28.6-11.8
					c-6.2-7-9.3-17.8-9.3-32.2V228h-19.3c-2,0-3.6-0.5-4.8-1.7c-1.2-1.1-1.8-2.6-1.8-4.4c0-1.9,0.6-3.4,1.8-4.6
					c1.2-1.2,2.8-1.8,4.8-1.8h19.3V184c0-2.5,0.7-4.5,2-5.8c1.4-1.4,3.2-2,5.6-2c2.4,0,4.3,0.7,5.7,2c1.4,1.4,2.2,3.3,2.2,5.8v31.5
					h30.8c2.2,0,3.9,0.6,5.1,1.8c1.2,1.2,1.8,2.7,1.8,4.6c0,1.9-0.6,3.3-1.8,4.4c-1.2,1.1-2.9,1.7-5.1,1.7h-30.8v68.4
					c0,10.5,2,18,6.1,22.5c4.1,4.5,10.4,7.1,19.1,7.8l6.9,0.5C2684.3,327.6,2686.7,329.8,2686.7,333.7z"/>
			</g>
		</g>
	</g>
</g>
</svg>

Press "Ctrl + Enter" to see in full screen

CSS

body {
  background-color: #000 !important;
  padding: 20px;
}
.st0 {
	fill:none;
	stroke:#FFC100;
	stroke-width:40;
	stroke-miterlimit:10;
}
.st1 {
	fill:#FFFFFF;
}
#rotate {
  animation-name: girar;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  transform-origin: 246px 246px;
  display: inline-block;
}
.letters .frontend-letters path {
  animation-name: frontend-letters;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
.letters .net-letters path {
  animation-name: net-letters;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@keyframes girar {
  0% {
		transform: rotate(45deg);
		stroke: #FFC100;
		stroke-width:35;
  }
  40% {
  	stroke: #FFC100;
  }
  50% {
		transform: rotate(405deg);
		stroke: #ffffff;
		stroke-width:35;
  }
  90% {
  	stroke: #ffffff;
  }
  100% {
		transform: rotate(45deg);
		stroke: #FFC100;
		stroke-width:35;
  }
}
@keyframes frontend-letters {
  0% {
		fill: #ffffff;
  }
  40% {
		fill: #ffffff;
  }
  50% {
  	fill: #FFC100;
  }
  90% {
  	fill: #FFC100;
  }
  100% {
		fill: #ffffff;
  }
}
@keyframes net-letters {
  0% {
		fill: #cccccc;
  }
  50% {
  	fill: #cccccc;
  }
  100% {
		fill: #cccccc;
  }
}

Press "Ctrl + Enter" to see in full screen

JavaScript / jQuery

Press "Ctrl + Enter" to see in full screen

Watch live

Details

Author: djalho

Created: 26 February 2019

Last edition: 28 June 2019

Comments (0)

Copyright © 2018 - 2024 Frontendtools.net. All rights reserved. Site development by joypixel.