<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="440" height="280" viewBox="0 0 440 280">
  <defs>
    <filter id="master_svg0_0_8424" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="440" height="280">
      <feFlood flood-opacity="0" result="BackgroundImageFix" />
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
      <feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
      <feOffset dy="0" dx="0" />
      <feGaussianBlur stdDeviation="12" />
      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6399998664855957 0 0 0 0 1 0 0 0 1 0" />
      <feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
    </filter>
  </defs>
  <g>
    <g>
      <g class="target-1" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <path d="M162,0.93359375C162,0.93359375,272,0.93359375,272,0.93359375C272,0.93359375,272,29.57759375,272,29.57759375C272,29.57759375,162,29.57759375,162,29.57759375C162,29.57759375,162,0.93359375,162,0.93359375C162,0.93359375,162,0.93359375,162,0.93359375Z" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-2" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="277" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-3" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="290" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-4" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="303" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-5" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="316" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-6" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="329" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-7" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="342" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-8" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="355" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-9" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="368" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-10" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="381" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
      <g class="target-11" transform="matrix(1,0,0.5873306393623352,0.8093471527099609,-0.5483282140921801,0.1779923066496849)">
        <rect x="394" y="0.93359375" width="8" height="28.644010543823242" rx="0" fill="#00D7E9" fill-opacity="1" />
      </g>
    </g>
    <g filter="url(#master_svg0_0_8424)">
      <path d="M0,12C0,5.37259,5.37258,0,12,0C12,0,146.409,0,146.409,0C150.237,0,153.836,1.82646,156.095,4.9165C156.095,4.9165,170.405,24.4835,170.405,24.4835C172.664,27.5735,176.263,29.4,180.091,29.4C180.091,29.4,428,29.4,428,29.4C434.627,29.4,440,34.7726,440,41.4C440,41.4,440,268,440,268C440,274.627,434.627,280,428,280C428,280,12,280,12,280C5.37257,280,0,274.627,0,268C0,268,0,12,0,12C0,12,0,12,0,12Z" fill="#04041A" fill-opacity="0.20000000298023224" />
    </g>
  </g>
  <text class="title" x="20" y="35">
    标题标题
  </text>
  <foreignObject x="20" y="50" width="400" height="210">
    <div class="div-content" xmlns="http://www.w3.org/1999/xhtml">
      Normal HTML content.
    </div>
  </foreignObject>
</svg>
body {
  background-color: black;
}

@for $index from 1 through  11 {
  .target-#{$index} {
    opacity: 0.3;
    animation: fade 1.5s linear #{$index * 0.1}s infinite alternate;
  }
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

.title {
  font-size: 28px;
  fill: #00D7E9;
}

.div-content {
  background-color: #77777777;
  color: white;
  font-size: 24px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.