<svg viewBox="0 0 113.392 113.392" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation="5"/>
</filter>
</defs>
<rect class="fill-main-inverted" name="logo-background" width="113.39" height="113.39" rx="20" filter="url(#shadow)"/>
<path class="main-success line-path" d="M 14.174,42.521 42.521,14.174" name="logo-line0"></path>
<path class="main-info line-path" d="M 14.174,99.212 99.212,14.174" name="logo-line2"></path>
<circle class="fill-main-font" id="logo-dot" name="logo-dot" cx="92.13" cy="92.13" r="11.34"/>
<path class="main-warning line-path" d="M 42.521,99.212 99.212,42.521" name="logo-line3"></path>
<path class="main-sunny line-path" d="M 14.174,70.867 70.867,14.174" name="logo-line1"></path>
</svg>
svg {
pointer-events: none;
width: 300px;
overflow: visible;
}
path.line-path {
stroke-width: 9.96280003;
stroke-linecap: round;
}
svg.main-bg > path,
path.main-bg.line-path {
stroke: rgba(0, 0, 0, 1);
}
svg.main-font > path,
path.main-font.line-path {
stroke: rgba(255, 255, 255, 1);
}
svg.main-inverted > path,
path.main-inverted.line-path {
stroke: rgba(255, 255, 255, 1);
}
svg.main-warning > path,
path.main-warning.line-path {
stroke: rgba(239, 72, 61, 1);
}
svg.main-info > path,
path.main-info.line-path {
stroke: rgba(255, 143, 18, 1);
}
svg.main-sunny > path,
path.main-sunny.line-path {
stroke: rgba(255, 209, 0, 1);
}
svg.main-success > path,
path.main-success.line-path {
stroke: rgba(0, 174, 65, 1);
}
path.fill-main-bg {
fill: rgba(0, 0, 0, 1);
}
.fill-main-font {
fill: rgba(255, 255, 255, 1);
}
.fill-main-inverted {
fill: rgba(0, 0, 0, 1);
}
path.fill-main-warning {
fill: rgba(239, 72, 61, 1);
}
path.fill-main-info {
fill: rgba(255, 143, 18, 1);
}
path.fill-main-sunny {
fill: rgba(255, 209, 0, 1);
}
path.fill-main-success {
fill: rgba(0, 174, 65, 1);
}
.fill-main-font {
animation: pulsing 3s infinite;
animation: pulsing 10s infinite;
}
@keyframes pulsing {
0% {
transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
}
50% {
transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.