Files

106 lines
7.0 KiB
XML

<svg viewBox="0 0 331 566" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="board_fill_2" x1="1287.5" y1="-5.05741e-05" x2="1287.5" y2="268" gradientUnits="userSpaceOnUse">
<stop stop-color="#8E2F00"/>
<stop offset="1" stop-color="#662A0D"/>
</linearGradient>
<linearGradient id="board_fill_1" x1="316.744" y1="320.908" x2="379.604" y2="4.59125" gradientUnits="userSpaceOnUse">
<stop stop-color="#2A5338"/>
<stop offset="1" stop-color="#306843"/>
</linearGradient>
<linearGradient id="board_fill_4" x1="1287.5" y1="268" x2="1255.51" y2="570.824" gradientUnits="userSpaceOnUse">
<stop stop-color="#5B4822"/>
<stop offset="1" stop-color="#795711"/>
</linearGradient>
<linearGradient id="board_fill_3" x1="825.766" y1="658" x2="817.483" y2="793.488" gradientUnits="userSpaceOnUse">
<stop stop-color="#1D375D"/>
<stop offset="1" stop-color="#385888"/>
</linearGradient>
<filter id="board-3d-effect" x="-10%" y="-10%" width="120%" height="120%" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix><feOffset dy="4"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feComposite in2="hardAlpha" operator="out"></feComposite><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha2"></feColorMatrix><feOffset dy="-4"></feOffset><feComposite in2="hardAlpha2" operator="arithmetic" k2="-1" k3="1"></feComposite><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"></feColorMatrix><feBlend mode="normal" in2="shape" result="effect2_innerShadow"></feBlend></filter>
</defs>
<g class="board-group" >
<path class="board-01" d="M3.9375 5.9058C3.9375 3.73142 5.70018 1.96875 7.87455 1.96875H161C163.175 1.96875 164.938 3.73143 164.938 5.9058V280.969H7.87456C5.70018 280.969 3.9375 279.206 3.9375 277.032V5.9058Z" fill="url(#board_fill_1)" filter="url(#board-3d-effect)"/>
<path class="board-02" d="M164.938 5.90578C164.938 3.73141 166.7 1.96875 168.875 1.96875H323C325.175 1.96875 326.938 3.73143 326.938 5.9058V356.032C326.938 358.206 325.175 359.969 323 359.969H164.938V5.90578Z" fill="url(#board_fill_2)" filter="url(#board-3d-effect)"/>
<rect class="board-03" x="3.9375" y="280.969" width="161" height="279" rx="3.93705" fill="url(#board_fill_3)" filter="url(#board-3d-effect)"/>
<rect class="board-03" x="164.938" y="359.969" width="162" height="78" rx="3.93705" fill="url(#board_fill_3)" filter="url(#board-3d-effect)"/>
<rect class="board-04" x="163.938" y="437.969" width="163" height="122" rx="3.93705" fill="url(#board_fill_4)" filter="url(#board-3d-effect)"/>
</g>
<!-- .puzzle-piece-group board-N: 플레이 버튼 색 — puzzle.svg·puzzle-onboarding.js 와 동일 규칙 -->
<g class="piece-group" >
<g class="puzzle-piece-group board-1" data-piece="1">
<path class="piece-01" d="M133.938 280.969H7.9375V43.9688H85.9375V5.96875H164.938V123.969H133.938V280.969Z" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-2" data-piece="2">
<path class="piece-02" d="M243.938 44.9688H322.938V123.969H164.938V5.96875H243.938V44.9688Z" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-2" data-piece="3">
<path class="piece-03" d="M322.938 199.968H133.938V123.969H322.938V199.968Z" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-2" data-piece="4">
<rect class="piece-04" x="133.938" y="199.969" width="189" height="81" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-2" data-piece="5">
<path class="piece-05" d="M322.938 280.969H163.938V359.969H322.938V280.969Z" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-3" data-piece="6">
<path class="piece-06" d="M163.938 418.969V280.969H7.9375V418.969H163.938Z" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-3" data-piece="7">
<path class="piece-07" d="M163.938 418.969V555.969H86.9375V517.969H7.9375V418.969H163.938Z" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-3" data-piece="8">
<path class="piece-08" d="M322.941 359.969V437.969H163.941V359.969H322.941Z" fill="#D9D9D9"/>
</g>
<g class="puzzle-piece-group board-4" data-piece="9">
<path class="piece-09" d="M163.938 437.969V555.969H241.938V516.969H322.938V437.969H163.938Z" fill="#D9D9D9"/>
</g>
</g>
<g class="piece-gauge-group" >
<g class="piece-gauge" data-piece="1">
<rect class="gauge-fill-line" x="7.9375" y="277.969" width="126" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="2">
<rect class="gauge-fill-line" x="165.938" y="119.969" width="157" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="3">
<rect class="gauge-fill-line" x="134.938" y="195.969" width="188" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="4">
<rect class="gauge-fill-line" x="134.938" y="277.969" width="188" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="5">
<rect class="gauge-fill-line" x="164.938" y="355.969" width="158" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="6">
<rect class="gauge-fill-line" x="7.9375" y="415.969" width="156" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="7">
<rect class="gauge-fill-line" x="86.9375" y="552.969" width="77" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="8">
<rect class="gauge-fill-line" x="164.938" y="433.969" width="158" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
<g class="piece-gauge" data-piece="9">
<rect class="gauge-fill-line" x="164.938" y="552.969" width="77" height="3" rx="1.5" fill="#A0A0A0"/>
</g>
</g>
<g class="grid-line-group" stroke-width="1">
<line x1="165.438" y1="5.96875" x2="165.438" y2="123.969" stroke="black"/>
<line x1="133.938" y1="123.469" x2="322.938" y2="123.469" stroke="black"/>
<line x1="134.438" y1="123.969" x2="134.438" y2="280.969" stroke="black"/>
<line x1="322.938" y1="281.469" x2="7.9375" y2="281.469" stroke="black"/>
<line x1="164.438" y1="280.969" x2="164.438" y2="559.969" stroke="black"/>
<line x1="164.937" y1="419.469" x2="7.9375" y2="419.469" stroke="black"/>
<line x1="163.938" y1="437.469" x2="322.938" y2="437.469" stroke="black"/>
<line x1="163.938" y1="359.469" x2="322.938" y2="359.469" stroke="black"/>
<line x1="133.938" y1="199.469" x2="322.938" y2="199.469" stroke="black"/>
</g>
</svg>