SCSS
$size: 260px;
.logo {
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
margin: (-$size/2) 0 0 (-$size/2);
width: $size;
height: $size;
border-radius: 20%;
background: linear-gradient(135deg, rgba(255, 90, 96, 1) 0%, rgba(255, 88, 140, 1) 100%);
border: 1px solid #ca4662;
box-shadow: 0 40px 100px rgba(202, 70, 98, 0.62);
&__top {
position: absolute;
top: 35px;
width: 67px;
left: 95px;
height: 29px;
overflow: hidden;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 0;
width: 43px;
height: 60px;
border-radius: 50%;
border-width: 12px;
border-style: solid;
border-color: #fff;
}
}
&__sides {
position: absolute;
width: 100%;
height: 100%;
&:before,
&:after {
content: '';
position: absolute;
border-style: solid;
border-color: #fff;
transform-origin: 0 0;
border-width: 12px 0 0 12px;
}
&:before {
left: 100.4px;
top: 54px;
height: 110px;
transform: rotate(26deg);
}
&:after {
right: 102px;
top: 59px;
height: 110px;
transform: rotate(-26.5deg);
}
}
&__corners {
span {
position: absolute;
overflow: hidden;
height: 54px;
width: 61px;
bottom: 43px;
&:after {
content: '';
position: absolute;
display: block;
left: 0;
bottom: 0;
width: 59px;
height: 59px;
border-radius: 50%;
border-width: 12px;
border-style: solid;
border-color: #fff;
}
}
span:first-child {
left: 45px;
}
span:last-child {
right: 47px;
&:after {
right: 0;
left: initial;
}
}
}
&__loop {
span {
position: absolute;
overflow: hidden;
left: 98px;
height: 44px;
width: 68px;
bottom: 116px;
&:after {
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
width: 39px;
height: 44px;
border-radius: 50%;
border-width: 12px;
border-style: solid;
border-color: #fff;
}
}
span:nth-child(2) {
bottom: 15px;
left: 106px;
width: 57px;
height: 105px;
&:after {
left: initial;
right: 0;
top: -130px;
width: 208px;
height: 193px;
}
}
span:nth-child(3) {
bottom: 15px;
left: 96px;
width: 57px;
height: 105px;
&:after {
left: initial;
left: 0;
top: -130px;
width: 208px;
height: 194px;
}
}
}
}
