<!--



Generated by DrawGPT.

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

https://drawgpt.ai



Created: 2025-05-16T23:20:47+00:00

-->

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

  <title>Pinkville Flag</title>

  <desc>This flag is so pink, even unicorns take a second look!</desc>

  

  <!-- Background Gradient -->

  <defs>

    <linearGradient id="backgroundGradient" x1="0%" y1="0%" x2="100%" y2="100%">

      <stop offset="0%" style="stop-color:#FFC0CB; stop-opacity:1">

        <animate attributeName="stop-color" values="#FFC0CB;#FFB6C1;#FFC0CB" dur="5s" repeatCount="indefinite" />

      </stop>

      <stop offset="100%" style="stop-color:#FF69B4; stop-opacity:1">

        <animate attributeName="stop-color" values="#FF69B4;#FF1493;#FF69B4" dur="5s" repeatCount="indefinite" />

      </stop>

    </linearGradient>

  </defs>

  

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

  

  <!-- Central Emblem -->

  <g id="emblem-group" class="emblem">

    <!-- Heart Shape -->

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

      C200,320 160,280 160,224 

      C160,168 200,128 256,128 

      C312,128 352,168 352,224 

      C352,280 312,320 256,320 Z" fill="#FF1493">

      <animateTransform attributeName="transform" type="scale" values="1;1.05;1" dur="5s" repeatCount="indefinite" />

    </path>

    

    <!-- Sparkles Around Heart -->

    <circle id="sparkle1" class="sparkle" cx="196" cy="180" r="8" fill="#FFFFFF">

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

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

    </circle>

    <circle id="sparkle2" class="sparkle" cx="316" cy="180" r="6" fill="#FFFFFF">

      <animate attributeName="opacity" values="0.8;0;0.8" dur="5s" repeatCount="indefinite" />

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

    </circle>

    <circle id="sparkle3" class="sparkle" cx="256" cy="100" r="10" fill="#FFFFFF">

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

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

    </circle>

  </g>

  

  <!-- Decorative Stars -->

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

    <polygon id="star1" class="star" points="50,150 60,190 100,190 65,215 75,255 50,230 25,255 35,215 0,190 40,190" fill="#FFD700">

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

    </polygon>

    <polygon id="star2" class="star" points="462,150 472,190 512,190 477,215 487,255 462,230 437,255 447,215 412,190 452,190" fill="#FFD700">

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

    </polygon>

    <polygon id="star3" class="star" points="256,30 266,70 306,70 271,95 281,135 256,110 231,135 241,95 206,70 246,70" fill="#FFD700">

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

    </polygon>

  </g>

  

  <!-- Wavy Stripes -->

  <g id="stripes-group" class="stripes">

    <path id="stripe1" class="stripe" d="M0,350 Q256,400 512,350 L512,370 Q256,420 0,370 Z" fill="#FFB6C1">

      <animate attributeName="d" values="

        M0,350 Q256,400 512,350 L512,370 Q256,420 0,370 Z;

        M0,350 Q256,390 512,350 L512,370 Q256,410 0,370 Z;

        M0,350 Q256,400 512,350 L512,370 Q256,420 0,370 Z" dur="5s" repeatCount="indefinite" />

    </path>

    <path id="stripe2" class="stripe" d="M0,390 Q256,440 512,390 L512,410 Q256,460 0,410 Z" fill="#FF69B4">

      <animate attributeName="d" values="

        M0,390 Q256,440 512,390 L512,410 Q256,460 0,410 Z;

        M0,390 Q256,430 512,390 L512,410 Q256,450 0,410 Z;

        M0,390 Q256,440 512,390 L512,410 Q256,460 0,410 Z" dur="5s" repeatCount="indefinite" />

    </path>

  </g>

  

  <!-- Animated Clouds -->

  <g id="clouds-group" class="clouds">

    <ellipse id="cloud1" class="cloud" cx="100" cy="80" rx="40" ry="20" fill="#FFFFFF" opacity="0.8">

      <animateTransform attributeName="transform" type="translate" from="-20 0" to="20 0" dur="5s" repeatCount="indefinite" />

    </ellipse>

    <ellipse id="cloud2" class="cloud" cx="412" cy="120" rx="35" ry="18" fill="#FFFFFF" opacity="0.8">

      <animateTransform attributeName="transform" type="translate" from="20 0" to="-20 0" dur="5s" repeatCount="indefinite" />

    </ellipse>

    <ellipse id="cloud3" class="cloud" cx="256" cy="60" rx="50" ry="25" fill="#FFFFFF" opacity="0.8">

      <animateTransform attributeName="transform" type="translate" from="-30 0" to="30 0" dur="5s" repeatCount="indefinite" />

    </ellipse>

  </g>

  

  <!-- Border -->

  <rect id="border" class="border" x="5" y="5" width="502" height="502" fill="none" stroke="#FF69B4" stroke-width="10">

    <animate attributeName="stroke-width" values="10;15;10" dur="5s" repeatCount="indefinite" />

  </rect>

  

</svg>