<!--



Generated by DrawGPT.

Free, open source, AI generated images in SVG, PNG, and HTML Canvas format.

https://drawgpt.ai



Created: 2024-12-24T17:21:26+00:00

-->

<svg   viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">

  <title>Mystical Love Between Sombra and Loona</title>

  <desc>When a shadowy pony meets a moonlit star, their love illuminates the night! Why did Sombra and Loona start a band? Because they wanted to find their perfect harmony!</desc>

  

  <!-- Background -->

  <rect id="background" class="background" width="512" height="512" fill="url(#skyGradient)"/>

  <defs>

    <linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="512">

      <stop offset="0%" stop-color="#1e3c72"/>

      <stop offset="100%" stop-color="#2a5298"/>

    </linearGradient>

  </defs>

  

  <!-- Moon -->

  <circle id="moon" class="moon" cx="400" cy="100" r="50" fill="#f0e68c">

    <animate attributeName="cx" from="400" to="420" dur="5s" repeatCount="indefinite" fill="freeze" />

    <animate attributeName="cy" from="100" to="80" dur="5s" repeatCount="indefinite" fill="freeze" />

  </circle>

  

  <!-- Stars -->

  <g id="stars" class="stars">

    <circle cx="80" cy="60" r="3" fill="#ffffff">

      <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" />

    </circle>

    <circle cx="150" cy="120" r="2" fill="#ffffff">

      <animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite" />

    </circle>

    <circle cx="300" cy="80" r="4" fill="#ffffff">

      <animate attributeName="opacity" values="1;0.5;1" dur="4s" repeatCount="indefinite" />

    </circle>

    <!-- More stars can be added similarly -->

  </g>

  

  <!-- Sombra -->

  <g id="sombra" class="sombra" transform="translate(150, 300)">

    <ellipse cx="0" cy="0" rx="50" ry="80" fill="#4b0082" />

    <polygon points="-50,0 -70,-30 -50,-60 -30,-30" fill="#483d8b">

      <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite" />

    </polygon>

    <circle cx="-15" cy="-40" r="10" fill="#ffffff"/>

    <circle cx="15" cy="-40" r="10" fill="#ffffff"/>

    <path d="M-20,10 Q0,30 20,10" stroke="#ffffff" stroke-width="5" fill="none">

      <animate attributeName="d" values="M-20,10 Q0,30 20,10; M-20,10 Q0,35 20,10; M-20,10 Q0,30 20,10" dur="5s" repeatCount="indefinite" />

    </path>

  </g>

  

  <!-- Loona -->

  <g id="loona" class="loona" transform="translate(350, 300)">

    <ellipse cx="0" cy="0" rx="50" ry="80" fill="#ff69b4" />

    <polygon points="-50,0 -70,30 -50,60 -30,30" fill="#ff1493">

      <animateTransform attributeName="transform" type="scale" from="1" to="1.2" dur="5s" repeatCount="indefinite" />

    </polygon>

    <circle cx="-15" cy="-40" r="10" fill="#ffffff"/>

    <circle cx="15" cy="-40" r="10" fill="#ffffff"/>

    <path d="M-20,10 Q0,-10 20,10" stroke="#ffffff" stroke-width="5" fill="none">

      <animate attributeName="d" values="M-20,10 Q0,-10 20,10; M-20,10 Q0,-15 20,10; M-20,10 Q0,-10 20,10" dur="5s" repeatCount="indefinite" />

    </path>

  </g>

  

  <!-- Heart -->

  <path id="heart" class="heart" d="M256,400 

    C256,350 200,350 200,400 

    C200,450 256,500 256,500 

    C256,500 312,450 312,400 

    C312,350 256,350 256,400 Z" fill="#ff0000">

    <animate attributeName="fill" values="#ff0000;#ff69b4;#ff0000" dur="5s" repeatCount="indefinite" />

  </path>

  

  <!-- Love Sparkles -->

  <g id="sparkles" class="sparkles">

    <circle cx="256" cy="350" r="5" fill="#fffacd">

      <animateTransform attributeName="transform" type="scale" from="1" to="1.5" dur="2.5s" repeatCount="indefinite" />

      <animate attributeName="opacity" values="1;0;1" dur="2.5s" repeatCount="indefinite" />

    </circle>

    <circle cx="220" cy="330" r="3" fill="#fffacd">

      <animateTransform attributeName="transform" type="scale" from="1" to="1.3" dur="2s" repeatCount="indefinite" />

      <animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite" />

    </circle>

    <circle cx="292" cy="330" r="3" fill="#fffacd">

      <animateTransform attributeName="transform" type="scale" from="1" to="1.3" dur="2s" repeatCount="indefinite" />

      <animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite" />

    </circle>

    <!-- More sparkles can be added similarly -->

  </g>

</svg>