readme_images/bronze_cold.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="170" viewBox="0 0 350 170">
  <style type="text/css">
    <![CDATA[
                @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=block');
                @keyframes fadeIn {
                    0% { opacity: 0; }
                    40% { opacity: 0; }
                    100% { opacity: 1; }
                }
                .zandi {
                    opacity: 0;
                    animation: fadeIn 0.5s ease-in-out forwards;
                }
                #handle {
                    opacity: 0;
                    animation: fadeIn 0.5s ease-in-out forwards;
                }
                #tier {
                    opacity: 0;
                    animation: fadeIn 0.5s ease-in-out forwards;
                }
            ]]>
  </style>
  <defs>
    <clipPath id="clip-Bronze_-_1">
      <rect width="350" height="170"/>
    </clipPath>
  </defs>
  <g id="zandies">
    <rect id="background" width="349" height="169" rx="14" fill="#fdfdfd" style="stroke-width:0.5;stroke:#bfbfbf"/>
    <text id="handle" transform="translate(23 32)" fill="#A25B36" font-size="14" font-family="NotoSansKR-Black, Noto Sans KR" font-weight="800" style="animation-delay:100ms">lovelyalpaca</text>
    <text id="tier" transform="translate(327 32)" fill="#A25B36" font-size="12" font-family="NotoSansKR-Black, Noto Sans KR" font-weight="800" text-anchor="end" style="animation-delay:300ms">Bronze 1</text>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(23 44)" fill="#F1F0F5" style="animation-delay:500ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(23 60)" fill="#C6B7AE" style="animation-delay:554ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(23 76)" fill="#C6B7AE" style="animation-delay:608ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(23 92)" fill="#F1F0F5" style="animation-delay:662ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(23 108)" fill="#F1F0F5" style="animation-delay:716ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(23 124)" fill="#A3805E" style="animation-delay:770ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(23 140)" fill="#F1F0F5" style="animation-delay:824ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(40 44)" fill="#F1F0F5" style="animation-delay:528ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(40 60)" fill="#C6B7AE" style="animation-delay:582ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(40 76)" fill="#F1F0F5" style="animation-delay:636ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(40 92)" fill="#A3805E" style="animation-delay:690ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(40 108)" fill="#F1F0F5" style="animation-delay:744ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(40 124)" fill="#F1F0F5" style="animation-delay:798ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(40 140)" fill="#F1F0F5" style="animation-delay:852ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(57 44)" fill="#C6B7AE" style="animation-delay:556ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(57 60)" fill="#F1F0F5" style="animation-delay:610ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(57 76)" fill="#F1F0F5" style="animation-delay:664ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(57 92)" fill="#F1F0F5" style="animation-delay:718ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(57 108)" fill="#F1F0F5" style="animation-delay:772ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(57 124)" fill="#C6B7AE" style="animation-delay:826ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(57 140)" fill="#F1F0F5" style="animation-delay:880ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(74 44)" fill="#C6B7AE" style="animation-delay:584ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(74 60)" fill="#F1F0F5" style="animation-delay:638ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(74 76)" fill="#F1F0F5" style="animation-delay:692ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(74 92)" fill="#F1F0F5" style="animation-delay:746ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(74 108)" fill="#C6B7AE" style="animation-delay:800ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(74 124)" fill="#F1F0F5" style="animation-delay:854ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(74 140)" fill="#A3805E" style="animation-delay:908ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(91 44)" fill="#F1F0F5" style="animation-delay:612ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(91 60)" fill="#F1F0F5" style="animation-delay:666ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(91 76)" fill="#C6B7AE" style="animation-delay:720ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(91 92)" fill="#A3805E" style="animation-delay:774ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(91 108)" fill="#5D432F" style="animation-delay:828ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(91 124)" fill="#F1F0F5" style="animation-delay:882ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(91 140)" fill="#F1F0F5" style="animation-delay:936ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(108 44)" fill="#F1F0F5" style="animation-delay:640ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(108 60)" fill="#F1F0F5" style="animation-delay:694ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(108 76)" fill="#F1F0F5" style="animation-delay:748ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(108 92)" fill="#C6B7AE" style="animation-delay:802ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(108 108)" fill="#F1F0F5" style="animation-delay:856ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(108 124)" fill="#C6B7AE" style="animation-delay:910ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(108 140)" fill="#F1F0F5" style="animation-delay:964ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(125 44)" fill="#F1F0F5" style="animation-delay:668ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(125 60)" fill="#F1F0F5" style="animation-delay:722ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(125 76)" fill="#F1F0F5" style="animation-delay:776ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(125 92)" fill="#F1F0F5" style="animation-delay:830ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(125 108)" fill="#F1F0F5" style="animation-delay:884ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(125 124)" fill="#F1F0F5" style="animation-delay:938ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(125 140)" fill="#F1F0F5" style="animation-delay:992ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(142 44)" fill="#A3805E" style="animation-delay:696ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(142 60)" fill="#C6B7AE" style="animation-delay:750ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(142 76)" fill="#F1F0F5" style="animation-delay:804ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(142 92)" fill="#C6B7AE" style="animation-delay:858ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(142 108)" fill="#C6B7AE" style="animation-delay:912ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(142 124)" fill="#F1F0F5" style="animation-delay:966ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(142 140)" fill="#F1F0F5" style="animation-delay:1020ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(159 44)" fill="#5D432F" style="animation-delay:724ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(159 60)" fill="#F1F0F5" style="animation-delay:778ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(159 76)" fill="#F1F0F5" style="animation-delay:832ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(159 92)" fill="#F1F0F5" style="animation-delay:886ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(159 108)" fill="#C6B7AE" style="animation-delay:940ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(159 124)" fill="#A3805E" style="animation-delay:994ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(159 140)" fill="#F1F0F5" style="animation-delay:1048ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(176 44)" fill="#F1F0F5" style="animation-delay:752ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(176 60)" fill="#F1F0F5" style="animation-delay:806ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(176 76)" fill="#F1F0F5" style="animation-delay:860ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(176 92)" fill="#F1F0F5" style="animation-delay:914ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(176 108)" fill="#F1F0F5" style="animation-delay:968ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(176 124)" fill="#F1F0F5" style="animation-delay:1022ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(176 140)" fill="#F1F0F5" style="animation-delay:1076ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(193 44)" fill="#F1F0F5" style="animation-delay:780ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(193 60)" fill="#F1F0F5" style="animation-delay:834ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(193 76)" fill="#F1F0F5" style="animation-delay:888ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(193 92)" fill="#F1F0F5" style="animation-delay:942ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(193 108)" fill="#C6B7AE" style="animation-delay:996ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(193 124)" fill="#C6B7AE" style="animation-delay:1050ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(193 140)" fill="#5D432F" style="animation-delay:1104ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(210 44)" fill="#F1F0F5" style="animation-delay:808ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(210 60)" fill="#C6B7AE" style="animation-delay:862ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(210 76)" fill="#A3805E" style="animation-delay:916ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(210 92)" fill="#C6B7AE" style="animation-delay:970ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(210 108)" fill="#F1F0F5" style="animation-delay:1024ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(210 124)" fill="#F1F0F5" style="animation-delay:1078ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(210 140)" fill="#F1F0F5" style="animation-delay:1132ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(227 44)" fill="#F1F0F5" style="animation-delay:836ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(227 60)" fill="#F1F0F5" style="animation-delay:890ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(227 76)" fill="#C6B7AE" style="animation-delay:944ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(227 92)" fill="#F1F0F5" style="animation-delay:998ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(227 108)" fill="#F1F0F5" style="animation-delay:1052ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(227 124)" fill="#F1F0F5" style="animation-delay:1106ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(227 140)" fill="#F1F0F5" style="animation-delay:1160ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(244 44)" fill="#C6B7AE" style="animation-delay:864ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(244 60)" fill="#F1F0F5" style="animation-delay:918ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(244 76)" fill="#F1F0F5" style="animation-delay:972ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(244 92)" fill="#A3805E" style="animation-delay:1026ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(244 108)" fill="#F1F0F5" style="animation-delay:1080ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(244 124)" fill="#F1F0F5" style="animation-delay:1134ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(244 140)" fill="#F1F0F5" style="animation-delay:1188ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(261 44)" fill="#5D432F" style="animation-delay:892ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(261 60)" fill="#A3805E" style="animation-delay:946ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(261 76)" fill="#C6B7AE" style="animation-delay:1000ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(261 92)" fill="#5D432F" style="animation-delay:1054ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(261 108)" fill="#F1F0F5" style="animation-delay:1108ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(261 124)" fill="#C6B7AE" style="animation-delay:1162ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(261 140)" fill="#F1F0F5" style="animation-delay:1216ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(278 44)" fill="#F1F0F5" style="animation-delay:920ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(278 60)" fill="#A3805E" style="animation-delay:974ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(278 76)" fill="#F1F0F5" style="animation-delay:1028ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(278 92)" fill="#F1F0F5" style="animation-delay:1082ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(278 108)" fill="#C6B7AE" style="animation-delay:1136ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(278 124)" fill="#F1F0F5" style="animation-delay:1190ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(278 140)" fill="#F1F0F5" style="animation-delay:1244ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(295 44)" fill="#F1F0F5" style="animation-delay:948ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(295 60)" fill="#F1F0F5" style="animation-delay:1002ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(295 76)" fill="#C6B7AE" style="animation-delay:1056ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(295 92)" fill="#C6B7AE" style="animation-delay:1110ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(295 108)" fill="#C6B7AE" style="animation-delay:1164ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(295 124)" fill="#F1F0F5" style="animation-delay:1218ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(295 140)" fill="#C6B7AE" style="animation-delay:1272ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(312 44)" fill="#F1F0F5" style="animation-delay:976ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(312 60)" fill="#C6B7AE" style="animation-delay:1030ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(312 76)" fill="#F1F0F5" style="animation-delay:1084ms"/>
    <rect class="zandi" width="15" height="15" rx="4" transform="translate(312 92)" fill="#F1F0F5" style="animation-delay:1138ms"/>
  </g>
</svg>