<svg id="thisSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 120">
  <defs>
    <style>
      #lightDot {
        display: none;
      }
      #thisSvg:hover #lightDot {
        display: block;
      }
      .is-blend {
        mix-blend-mode: color-dodge;
      }
    </style>
    <linearGradient id="gradientBackground">
      <stop offset="0" stop-color="#001a2c" />
      <stop offset="1" stop-color="#341600" />
      <animate attributeName="y1" values="0;1;0" dur="3s" repeatCount="indefinite" />
      <animate attributeName="y2" values="1;0;1" dur="3s" repeatCount="indefinite" />
    </linearGradient>
    <radialGradient id="gradientLightDot">
      <stop offset="0" stop-color="#fff" />
      <stop offset="1" stop-color="#000" />
    </radialGradient>
    <radialGradient id="gradientLightCircle">
      <stop offset=".87118" stop-color="#000" stop-opacity="0" />
      <stop offset=".92628" stop-color="#fff" />
      <stop offset=".95108" stop-color="#fff" />
      <stop offset=".98001" stop-color="#000" stop-opacity="0" />
    </radialGradient>
    <path id="motionPath" fill="none" d="M102,53c0,23.19596-18.80404,42-42,42S18,76.19596,18,53,36.80404,11,60,11s42,18.80404,42,42Z" />
  </defs>
  <g>
    <rect data-name="背景矩形" fill="url(#gradientBackground)" width="100%" height="100%" />

    <path class="is-blend" data-name="光圈" fill="url(#gradientLightCircle)" d="M60,98c-24.81299,0-45-20.18652-45-45S35.18701,8,60,8s45,20.18701,45,45-20.18652,45-45,45Zm0-86c-22.60742,0-41,18.39258-41,41s18.39258,41,41,41,41-18.39258,41-41S82.60742,12,60,12Z" />

    <circle id="lightDot" class="is-blend" data-name="光点" fill="url(#gradientLightDot)" r="9.5">
      <animate attributeName="r" values="5;30;10;30;5" dur="5s" repeatCount="indefinite" />
      <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
        <mpath href="#motionPath" />
      </animateMotion>
    </circle>

    <ellipse class="is-blend" data-name="底部投影" fill="url(#gradientLightDot)" cx="60" cy="110.06757" rx="56" ry="6.52377">
      <animate attributeName="ry" values="2;10;2" dur="2s" repeatCount="indefinite" />
    </ellipse>
  </g>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.