unicorn svg

unicorn.xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
  <defs>
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="6" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <rect width="800" height="600" fill="#0b001a" />

  <g fill="#ffffff">
    <circle cx="150" cy="120" r="2"><animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite"/></circle>
    <circle cx="650" cy="180" r="3"><animate attributeName="opacity" values="0.5;1;0.5" dur="4s" repeatCount="indefinite"/></circle>
    <circle cx="220" cy="450" r="1.5"><animate attributeName="opacity" values="0.1;0.8;0.1" dur="2.5s" repeatCount="indefinite"/></circle>
    <circle cx="550" cy="80" r="2.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="5s" repeatCount="indefinite"/></circle>
    <circle cx="380" cy="60" r="2"><animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite"/></circle>
    <circle cx="720" cy="350" r="1.5"><animate attributeName="opacity" values="0.2;1;0.2" dur="3.5s" repeatCount="indefinite"/></circle>
  </g>

  <g transform="translate(400, 300)" fill="none" stroke-width="12" opacity="0.4">
    <circle r="140" stroke="#ff2a2a" stroke-dasharray="20 40">
      <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
    </circle>
    <circle r="160" stroke="#ff7a2a" stroke-dasharray="30 50">
      <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="12s" repeatCount="indefinite"/>
    </circle>
    <circle r="180" stroke="#e8ff2a" stroke-dasharray="40 60">
      <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="14s" repeatCount="indefinite"/>
    </circle>
    <circle r="200" stroke="#2aff55" stroke-dasharray="50 70">
      <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="16s" repeatCount="indefinite"/>
    </circle>
    <circle r="220" stroke="#2a7aff" stroke-dasharray="60 80">
      <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="18s" repeatCount="indefinite"/>
    </circle>
    <circle r="240" stroke="#d42aff" stroke-dasharray="70 90">
      <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="20s" repeatCount="indefinite"/>
    </circle>
  </g>

  <g fill="none" stroke-width="18" opacity="0.8">
    <path d="M-100,500 Q200,400 400,500 T900,500" stroke="#ff2a2a">
      <animate attributeName="d" values="M-100,500 Q200,400 400,500 T900,500; M-100,500 Q200,600 400,500 T900,500; M-100,500 Q200,400 400,500 T900,500" dur="4s" repeatCount="indefinite"/>
    </path>
    <path d="M-100,518 Q200,418 400,518 T900,518" stroke="#ff7a2a">
      <animate attributeName="d" values="M-100,518 Q200,418 400,518 T900,518; M-100,518 Q200,618 400,518 T900,518; M-100,518 Q200,418 400,518 T900,518" dur="4.2s" repeatCount="indefinite"/>
    </path>
    <path d="M-100,536 Q200,436 400,536 T900,536" stroke="#e8ff2a">
      <animate attributeName="d" values="M-100,536 Q200,436 400,536 T900,536; M-100,536 Q200,636 400,536 T900,536; M-100,536 Q200,436 400,536 T900,536" dur="4.4s" repeatCount="indefinite"/>
    </path>
    <path d="M-100,554 Q200,454 400,554 T900,554" stroke="#2aff55">
      <animate attributeName="d" values="M-100,554 Q200,454 400,554 T900,554; M-100,554 Q200,654 400,554 T900,554; M-100,554 Q200,454 400,554 T900,554" dur="4.6s" repeatCount="indefinite"/>
    </path>
    <path d="M-100,572 Q200,472 400,572 T900,572" stroke="#2a7aff">
      <animate attributeName="d" values="M-100,572 Q200,472 400,572 T900,572; M-100,572 Q200,672 400,572 T900,572; M-100,572 Q200,472 400,572 T900,572" dur="4.8s" repeatCount="indefinite"/>
    </path>
  </g>

  <g transform="translate(350, 260) scale(1.3)">
    <animateTransform attributeName="transform" type="translate" values="350,260; 350,240; 350,260" dur="3.5s" repeatCount="indefinite"/>
    
    <path d="M -10 -40 C -30 -20, -40 20, -20 40 C -40 20, -50 -10, -10 -40 Z" fill="#d42aff">
         <animate attributeName="d" values="M -10 -40 C -30 -20, -40 20, -20 40 C -40 20, -50 -10, -10 -40 Z; M -10 -40 C -40 -10, -50 30, -10 50 C -50 20, -60 0, -10 -40 Z; M -10 -40 C -30 -20, -40 20, -20 40 C -40 20, -50 -10, -10 -40 Z" dur="2s" repeatCount="indefinite"/>
    </path>
    <path d="M 0 -50 C -20 -30, -20 10, -5 30 C -25 10, -30 -20, 0 -50 Z" fill="#2a7aff">
        <animate attributeName="d" values="M 0 -50 C -20 -30, -20 10, -5 30 C -25 10, -30 -20, 0 -50 Z; M 0 -50 C -30 -20, -30 20, 5 40 C -35 20, -40 -10, 0 -50 Z; M 0 -50 C -20 -30, -20 10, -5 30 C -25 10, -30 -20, 0 -50 Z" dur="2.5s" repeatCount="indefinite"/>
    </path>

    <path d="M -20 80 C -10 30, 10 0, 30 -20 C 50 -40, 60 -30, 70 -10 C 70 0, 50 10, 40 30 C 30 60, 20 80, -20 80 Z" fill="#ffffff"/>
    
    <path d="M 60 -20 C 80 -10, 85 5, 70 10 C 60 15, 50 15, 40 5 C 45 -10, 50 -15, 60 -20 Z" fill="#f4f4f4"/>

    <path d="M 45 -5 Q 50 -10 55 -5" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/>
    <circle cx="50" cy="-3" r="2" fill="#222" />
    <circle cx="51" cy="-4" r="0.8" fill="#fff" />

    <path d="M 25 -30 L 20 -50 L 35 -35 Z" fill="#ffffff" stroke="#e0e0e0" stroke-width="1"/>
    <path d="M 23 -33 L 22 -45 L 32 -35 Z" fill="#ffb3d9"/>

    <g filter="url(#glow)">
      <polygon points="40,-30 80,-85 50,-25" fill="#ffe600">
        <animate attributeName="fill" values="#ffe600;#ffffff;#ffe600" dur="1.5s" repeatCount="indefinite"/>
      </polygon>
    </g>
    
    <path d="M 44 -40 Q 55 -50 60 -45 M 50 -55 Q 65 -65 70 -60" fill="none" stroke="#d4af37" stroke-width="1.5" opacity="0.6"/>
    
    <g fill="#ffe600">
      <circle cx="75" cy="-60" r="2"><animate attributeName="opacity" values="0;1;0" dur="1s" repeatCount="indefinite" begin="0s"/></circle>
      <circle cx="95" cy="-75" r="1.5"><animate attributeName="opacity" values="0;1;0" dur="1.2s" repeatCount="indefinite" begin="0.5s"/></circle>
      <circle cx="65" cy="-90" r="2.5"><animate attributeName="opacity" values="0;1;0" dur="0.8s" repeatCount="indefinite" begin="0.2s"/></circle>
    </g>

    <path d="M 20 -35 C 10 -45, -5 -35, 5 -15 C -5 -25, 0 -45, 20 -35 Z" fill="#ff2a2a"/>
    <path d="M 10 -20 C -5 -25, -15 -10, 0 10 C -15 -5, -10 -25, 10 -20 Z" fill="#ff7a2a"/>
  </g>
</svg>