<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 {
  -webkit-animation: pulsing 3s infinite;
  animation: pulsing 10s infinite;
}

@keyframes pulsing {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
  }
  50% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.