多变形 + 线性渐变/放射渐变 + animation

<style>
        polygon{
            animation: strokeDefaultPoly 3s linear infinite alternate;
        }
        @keyframes strokeDefaultPoly {
            0% {
                stroke-dasharray: 0 50;
            }
            100% {
                stroke-dasharray: 500;
            }
        }
    </style>

<svg width="64" height="73">
   <defs>
      <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
         <stop offset="0%" stop-color="#ddd"/>
         <stop offset="50%" stop-color="rgba(8,68,158,0)"/>
         <stop offset="80%" stop-color="rgba(6,81,191,1)"/>
         <stop offset="100%" stop-color="rgba(0,108,255,0.35)"/>
      </linearGradient>
                         
      <linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#03ffea"/>
        <stop offset="100%" stop-color="#00CEFF"/>
      </linearGradient>
    </defs>
    <polygon fill="url(#linear)" points="30,1  60,17 60,52 30,69 1,52 1,17" stroke="url(#linear1)" stroke-width="2" />
</svg>

image.png

放射性渐变：

<svg height="80" style="position: absolute; left: 6px; top: 7px;">
    <defs>
        <radialGradient id="greyer1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:#000000; stop-opacity:0"/>
            <stop offset="100%" style="stop-color:#2B89A7; stop-opacity:1"/>
        </radialGradient>
    </defs>
    <polygon fill="url(#greyer1)" points="30,1 60,17 60,52 30,69 1,52 1,17" stroke="#00BFF0" stroke-width="2" style="transform: scale(0.9);"/>
</svg>

实现了效果：

image.png