HTML
<div class="logo-wrap">
<div class="triangle-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.7 187.1"><path d="M160.3 93.5L106.9 0 53.4 93.5 0 187.1h213.8l-53.5-93.6zm-12.2 71.4h-30.6c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h30.6c1.4 0 2.5 1.1 2.5 2.5s-1.2 2.5-2.5 2.5zm9.8-5.2c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.7 3.6-3.6 3.6zm11.2 0c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6-1.6 3.6-3.6 3.6z"/></svg>
</div>
<div class="triangle-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.7 187.1"><path d="M160.3 93.5L106.9 0 53.4 93.5 0 187.1h213.8l-53.5-93.6zm-12.2 71.4h-30.6c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h30.6c1.4 0 2.5 1.1 2.5 2.5s-1.2 2.5-2.5 2.5zm9.8-5.2c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.7 3.6-3.6 3.6zm11.2 0c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6-1.6 3.6-3.6 3.6z"/></svg>
</div>
<div class="logo-main"></div>
</div>
SCSS
@-webkit-keyframes rotation1 {
from { -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}
@-moz-keyframes rotation1 {
from { -moz-transform: rotate(0deg) translateX(10px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}
@keyframes rotation1 {
from { transform: rotate(0deg) translateX(10px) rotate(0deg); }
to { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}
@-webkit-keyframes rotation2 {
from { -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg); }
to { -webkit-transform: rotate(-360deg) translateX(10px) rotate(360deg); }
}
@-moz-keyframes rotation2 {
from { -moz-transform: rotate(0deg) translateX(10px) rotate(0deg); }
to { -moz-transform: rotate(-360deg) translateX(10px) rotate(360deg); }
}
@keyframes rotation2 {
from { transform: rotate(0deg) translateX(10px) rotate(0deg); }
to { transform: rotate(-360deg) translateX(10px) rotate(360deg); }
}
.logo-wrap,
.triangle-1,
.triangle-2,
.logo-main {
width: 200px;
height: 200px;
svg {
width: 100%;
}
}
.logo-wrap {
position: relative;
overflow: visible;
margin: 50px auto 0;
}
.triangle-1,
.triangle-2 {
position: absolute;
z-index: 5;
}
.triangle-1 {
-webkit-animation: rotation1 6s linear infinite;
-moz-animation: rotation1 6s linear infinite;
animation: rotation1 6s linear infinite;
}
.triangle-1 svg {
fill: #00CC9E;
}
.triangle-2 {
-webkit-animation: rotation2 4s linear infinite;
-moz-animation: rotation2 4s linear infinite;
animation: rotation2 4s linear infinite;
}
.triangle-2 svg {
fill: white;
stroke: #00CC9E;
stroke-width: 1px;
}
.logo-main {
position: relative;
z-index: 10;
background: url(http://dandvoracek.com/images/svg/logo.svg) no-repeat;
background-position: center top;
margin: 0 auto;
}
