<head>
<meta charset="UTF-8">
<title>SVG Logo Animation Test</title>
</head>
<body bgcolor="#10121c">
<div id="container">
<div id="markContainer">
<svg version="1.1" id="fg-logo" viewBox="0 0 88.8 89.2" xml:space="preserve" fill="url(#grad1)">
<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="-3.1374" y1="85.4184" x2="94.2043" y2="3.739">
<stop offset="0" style="stop-color:#47433A" />
<stop offset="0.2931" style="stop-color:#867D67" />
<stop offset="0.5059" style="stop-color:#D2C6A5" />
<stop offset="0.8292" style="stop-color:#867D67" />
<stop offset="1" style="stop-color:#47433A" />
</linearGradient>
<g id="group8">
<circle cx="86.4" cy="44.6" r="2.1" />
<circle cx="82.3" cy="34.7" r="2.1" />
<circle cx="64.2" cy="10.7" r="2.1" />
<circle cx="74.2" cy="14.8" r="2.1" />
<circle cx="78.2" cy="24.7" r="2.1" />
<circle cx="54.2" cy="6.6" r="2.1" />
<circle cx="44.3" cy="2.5" r="2.1" />
<circle cx="78.3" cy="64.7" r="2.1" />
<circle cx="82.4" cy="54.8" r="2.1" />
<circle cx="54.2" cy="82.8" r="2.1" />
<circle cx="44.3" cy="86.9" r="2.1" />
<circle cx="74.1" cy="74.7" r="2.1" />
<circle cx="64.2" cy="78.7" r="2.1" />
<circle cx="10.3" cy="64.6" r="2.1" />
<circle cx="24.5" cy="78.7" r="2.1" />
<circle cx="14.5" cy="74.6" r="2.1" />
<circle cx="34.4" cy="82.8" r="2.1" />
<circle cx="6.2" cy="34.8" r="2.1" />
<circle cx="2.2" cy="44.7" r="2.1" />
<circle cx="6.2" cy="54.6" r="2.1" />
<circle cx="10.3" cy="24.9" r="2.1" />
<circle cx="14.5" cy="14.9" r="2.1" />
<circle cx="24.4" cy="10.7" r="2.1" />
<circle cx="34.3" cy="6.6" r="2.1" />
</g>
<g id="group7">
<circle display="inline" opacity="0.9" cx="44.2" cy="10.3" r="1.9" />
<circle display="inline" opacity="0.9" cx="52.3" cy="13.6" r="1.9" />
<circle display="inline" opacity="0.9" cx="60.4" cy="16.9" r="1.9" />
<circle display="inline" opacity="0.9" cx="68.4" cy="20.4" r="1.9" />
<circle display="inline" opacity="0.9" cx="75" cy="36.5" r="1.9" />
<circle display="inline" opacity="0.9" cx="71.7" cy="28.4" r="1.9" />
<circle display="inline" opacity="0.9" cx="75.1" cy="52.6" r="1.9" />
<circle display="inline" opacity="0.9" cx="78.4" cy="44.5" r="1.9" />
<circle display="inline" opacity="0.9" cx="68.4" cy="68.8" r="1.9" />
<circle display="inline" opacity="0.9" cx="60.4" cy="72.2" r="1.9" />
<circle display="inline" opacity="0.9" cx="71.7" cy="60.7" r="1.9" />
<circle display="inline" opacity="0.9" cx="36.3" cy="75.5" r="1.9" />
<circle display="inline" opacity="0.9" cx="44.2" cy="78.9" r="1.9" />
<circle display="inline" opacity="0.9" cx="52.4" cy="75.5" r="1.9" />
<circle display="inline" opacity="0.9" cx="16.8" cy="60.7" r="1.9" />
<circle display="inline" opacity="0.9" cx="20.2" cy="68.8" r="1.9" />
<circle display="inline" opacity="0.9" cx="28.2" cy="72.1" r="1.9" />
<circle display="inline" opacity="0.9" cx="10.2" cy="44.7" r="1.9" />
<circle display="inline" opacity="0.9" cx="13.5" cy="52.7" r="1.9" />
<circle display="inline" opacity="0.9" cx="16.8" cy="28.4" r="1.9" />
<circle display="inline" opacity="0.9" cx="13.5" cy="36.6" r="1.9" />
<circle display="inline" opacity="0.9" cx="36.2" cy="13.7" r="1.9" />
<circle display="inline" opacity="0.9" cx="28.2" cy="17.1" r="1.9" />
<circle display="inline" opacity="0.9" cx="20.2" cy="20.5" r="1.9" />
</g>
<g id="group6">
<circle display="inline" opacity="0.8" cx="38.4" cy="20.2" r="1.6" />
<circle display="inline" opacity="0.8" cx="44.2" cy="17.8" r="1.6" />
<circle display="inline" opacity="0.8" cx="56" cy="22.6" r="1.6" />
<circle display="inline" opacity="0.8" cx="50.1" cy="20.2" r="1.6" />
<circle display="inline" opacity="0.8" cx="61.9" cy="25.1" r="1.6" />
<circle display="inline" opacity="0.8" cx="70" cy="41.8" r="1.6" />
<circle display="inline" opacity="0.8" cx="70" cy="47.6" r="1.6" />
<circle display="inline" opacity="0.8" cx="67.5" cy="36" r="1.6" />
<circle display="inline" opacity="0.8" cx="65.1" cy="30.1" r="1.6" />
<circle display="inline" opacity="0.8" cx="44.2" cy="71.6" r="1.6" />
<circle display="inline" opacity="0.8" cx="50.1" cy="69.3" r="1.6" />
<circle display="inline" opacity="0.8" cx="56" cy="66.8" r="1.6" />
<circle display="inline" opacity="0.8" cx="61.8" cy="64.4" r="1.6" />
<circle display="inline" opacity="0.8" cx="67.5" cy="53.5" r="1.6" />
<circle display="inline" opacity="0.8" cx="26.8" cy="64.4" r="1.6" />
<circle display="inline" opacity="0.8" cx="21.1" cy="53.5" r="1.6" />
<circle display="inline" opacity="0.8" cx="23.6" cy="59.4" r="1.6" />
<circle display="inline" opacity="0.8" cx="32.6" cy="66.8" r="1.6" />
<circle display="inline" opacity="0.8" cx="38.5" cy="69.2" r="1.6" />
<circle display="inline" opacity="0.8" cx="23.6" cy="30.1" r="1.6" />
<circle display="inline" opacity="0.8" cx="21.1" cy="35.9" r="1.6" />
<circle display="inline" opacity="0.8" cx="18.7" cy="41.8" r="1.6" />
<circle display="inline" opacity="0.8" cx="18.7" cy="47.7" r="1.6" />
<circle display="inline" opacity="0.8" cx="32.6" cy="22.7" r="1.6" />
<circle display="inline" opacity="0.8" cx="26.8" cy="25.1" r="1.6" />
<circle display="inline" opacity="0.8" cx="65.1" cy="59.4" r="1.6" />
</g>
<g id="group5">
<circle display="inline" opacity="0.7" cx="48.8" cy="26.2" r="1.4" />
<circle display="inline" opacity="0.7" cx="53.1" cy="28" r="1.4" />
<circle display="inline" opacity="0.7" cx="57.6" cy="29.9" r="1.4" />
<circle display="inline" opacity="0.7" cx="61.8" cy="38.1" r="1.4" />
<circle display="inline" opacity="0.7" cx="60" cy="33.7" r="1.4" />
<circle display="inline" opacity="0.7" cx="63.6" cy="46.9" r="1.4" />
<circle display="inline" opacity="0.7" cx="63.6" cy="42.5" r="1.4" />
<circle display="inline" opacity="0.7" cx="61.8" cy="51.4" r="1.4" />
<circle display="inline" opacity="0.7" cx="57.5" cy="59.6" r="1.4" />
<circle display="inline" opacity="0.7" cx="53.1" cy="61.4" r="1.4" />
<circle display="inline" opacity="0.7" cx="48.7" cy="63.3" r="1.4" />
<circle display="inline" opacity="0.7" cx="60" cy="55.8" r="1.4" />
<circle display="inline" opacity="0.7" cx="28.6" cy="55.8" r="1.4" />
<circle display="inline" opacity="0.7" cx="31.1" cy="59.6" r="1.4" />
<circle display="inline" opacity="0.7" cx="39.9" cy="63.3" r="1.4" />
<circle display="inline" opacity="0.7" cx="44.4" cy="65" r="1.4" />
<circle display="inline" opacity="0.7" cx="35.5" cy="61.4" r="1.4" />
<circle display="inline" opacity="0.7" cx="25" cy="47" r="1.4" />
<circle display="inline" opacity="0.7" cx="26.8" cy="51.4" r="1.4" />
<circle display="inline" opacity="0.7" cx="25" cy="42.5" r="1.4" />
<circle display="inline" opacity="0.7" cx="35.5" cy="28" r="1.4" />
<circle display="inline" opacity="0.7" cx="31.1" cy="29.8" r="1.4" />
<circle display="inline" opacity="0.7" cx="28.6" cy="33.6" r="1.4" />
<circle display="inline" opacity="0.7" cx="26.8" cy="38.1" r="1.4" />
<circle display="inline" opacity="0.7" cx="44.3" cy="24.5" r="1.4" />
<circle display="inline" opacity="0.7" cx="40" cy="26.2" r="1.4" />
</g>
<g id="group4">
<circle display="inline" opacity="0.6" cx="44.4" cy="30.7" r="1.1" />
<circle display="inline" opacity="0.6" cx="49.3" cy="32.7" r="1.1" />
<circle display="inline" opacity="0.6" cx="54.2" cy="34.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="56.3" cy="39.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="58.4" cy="44.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="56.3" cy="49.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="54.3" cy="54.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="49.3" cy="56.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="44.4" cy="58.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="39.3" cy="56.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="34.3" cy="54.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="32.3" cy="49.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="30.2" cy="44.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="32.3" cy="39.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="34.3" cy="34.8" r="1.1" />
<circle display="inline" opacity="0.6" cx="39.3" cy="32.7" r="1.1" />
</g>
<g id="group3">
<circle display="inline" opacity="0.5" cx="50.7" cy="38.4" r="0.8" />
<circle display="inline" opacity="0.5" cx="51.9" cy="41.5" r="0.8" />
<circle display="inline" opacity="0.5" cx="53.2" cy="44.8" r="0.8" />
<circle display="inline" opacity="0.5" cx="52" cy="47.9" r="0.8" />
<circle display="inline" opacity="0.5" cx="50.7" cy="51" r="0.8" />
<circle display="inline" opacity="0.5" cx="47.5" cy="52.4" r="0.8" />
<circle display="inline" opacity="0.5" cx="44.3" cy="53.6" r="0.8" />
<circle display="inline" opacity="0.5" cx="41.1" cy="52.4" r="0.8" />
<circle display="inline" opacity="0.5" cx="38" cy="51" r="0.8" />
<circle display="inline" opacity="0.5" cx="36.7" cy="47.9" r="0.8" />
<circle display="inline" opacity="0.5" cx="35.3" cy="44.7" r="0.8" />
<circle display="inline" opacity="0.5" cx="36.6" cy="41.6" r="0.8" />
<circle display="inline" opacity="0.5" cx="38" cy="38.4" r="0.8" />
<circle display="inline" opacity="0.5" cx="41.1" cy="37.1" r="0.8" />
<circle display="inline" opacity="0.5" cx="44.4" cy="35.8" r="0.8" />
<circle display="inline" opacity="0.5" cx="47.4" cy="37.1" r="0.8" />
</g>
<g id="group2">
<circle display="inline" opacity="0.4" cx="40.3" cy="43.4" r="0.5" />
<circle display="inline" opacity="0.4" cx="41.7" cy="41.2" r="0.5" />
<circle display="inline" opacity="0.4" cx="44.3" cy="40.3" r="0.5" />
<circle display="inline" opacity="0.4" cx="46.8" cy="41.2" r="0.5" />
<circle display="inline" opacity="0.4" cx="48.3" cy="43.4" r="0.5" />
<circle display="inline" opacity="0.4" cx="48.3" cy="46" r="0.5" />
<circle display="inline" opacity="0.4" cx="46.8" cy="48.1" r="0.5" />
<circle display="inline" opacity="0.4" cx="44.3" cy="49.2" r="0.5" />
<circle display="inline" opacity="0.4" cx="41.8" cy="48.1" r="0.5" />
<circle display="inline" opacity="0.4" cx="40.3" cy="45.9" r="0.5" />
</g>
<g id="group1">
<circle display="inline" opacity=".3" cx="44.4" cy="44.7" r="1.1" />
</g>
</svg>
</div>
<div id="appName" text-align: center;>
TESTR
</div>
</div>
</body>/*Font for CodePen*/
@import url(https://fonts.googleapis.com/css?family=Muli:300);
body {
font: 44px 'Muli', 'Arial';
/*font-family:"GothamRnd";*/
color: #e9dcb9;
/*font-size: 44px;*/
}
/*Logo Animation Sequence*/
@keyframes logoAnimation1 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes logoAnimation2 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
6% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes logoAnimation3 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
12% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes logoAnimation4 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
19% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes logoAnimation5 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
25% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes logoAnimation6 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
31% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes logoAnimation7 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
38% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes logoAnimation8 {
0% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
44% {
opacity: 0;
transform: scale(0.2) rotate(-45deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes markAnimation {
0% {
transform: scale(0.6) rotate(-45deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
@keyframes appNameAnimation {
0% {
opacity: 0;
letter-spacing: 0px;
}
40% {
opacity: 0;
letter-spacing: 0px;
}
100% {
opacity: 1;
letter-spacing: 20px;
}
}
#container {
margin-left: auto;
margin-right: auto;
margin-top: 60px;
transform-origin: center center;
width: 600px;
}
#markContainer {
margin-left: auto;
margin-right: auto;
transform-origin: center center;
animation: markAnimation 3.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
width: 200px;
}
#appName {
margin-left: auto;
margin-right: auto;
margin-top: 60px;
transform-origin: center center;
text-align: center;
letter-spacing: 20px;
animation: appNameAnimation 3.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group1 {
transform-origin: center center;
animation: logoAnimation1 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group2 {
transform-origin: center center;
animation: logoAnimation2 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group3 {
transform-origin: center center;
animation: logoAnimation3 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group4 {
transform-origin: center center;
animation: logoAnimation4 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group5 {
transform-origin: center center;
animation: logoAnimation5 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group6 {
transform-origin: center center;
animation: logoAnimation6 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group7 {
transform-origin: center center;
animation: logoAnimation7 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#group8 {
transform-origin: center center;
animation: logoAnimation8 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.