Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
@@ -0,0 +1,327 @@
|
||||
<!-- PC용 게이지 SVG (768px 이상) -->
|
||||
<div class="gauge-svg-pc">
|
||||
<svg
|
||||
id="gauge-svg"
|
||||
width="1610"
|
||||
height="631"
|
||||
viewBox="0 0 1610 631"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_14_397"
|
||||
style="mask-type: alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="25"
|
||||
y="0"
|
||||
width="1585"
|
||||
height="730"
|
||||
>
|
||||
<rect
|
||||
width="1584"
|
||||
height="730"
|
||||
transform="matrix(-1 0 0 1 1609.35 0)"
|
||||
fill="url(#paint0_linear_14_397)"
|
||||
/>
|
||||
</mask>
|
||||
<mask id="progressMask">
|
||||
<path
|
||||
id="maskPath"
|
||||
d="M -420.319 572.68 C -420.319 572.68 1411 648.6 1411 499.446 C 1408.18 305.242 118.94 387.337 118.94 290.767 C 118.94 183.271 1215.22 268.705 1215.22 185.273 C 1215.22 117.048 312.838 142.885 312.838 106.112 C 312.838 77.3325 719.914 71 719.914 71 H 720.826 C 720.826 71 317.003 79.7307 317.003 106.112"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-width="80"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="stroke-dasharray: 6050.94; stroke-dashoffset: 4840.75"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_14_397)">
|
||||
<g style="mix-blend-mode: multiply" opacity="0.2" filter="url(#filter0_f_14_397)">
|
||||
<path d="M352.858 106.774C352.858 83.6781 736.826 71 736.826 71H723.973C723.973 71 330.949 84.4519 330.949 107.94C330.949 156.604 1209.68 122.945 1205.11 191.15C1205.11 253.001 121.34 184.203 121.34 303.321C121.34 392.864 1393.35 333.757 1393.35 498.819C1393.35 593.455 -50.8243 581.056 -298.664 578.231C-320.836 577.201 -333.418 576.569 -334.563 576.511C-334.922 576.493 -334.649 576.808 -334.649 577.167C-334.649 577.51 -334.914 577.781 -334.571 577.786C-333.472 577.802 -320.87 577.978 -298.664 578.231C-45.2113 590.005 1461.35 653.777 1461.35 506.091C1461.35 311.639 164.09 374.692 164.09 298.323C164.09 188 1246.98 276.913 1246.98 188C1246.98 117.783 352.858 129.871 352.858 106.774Z" fill="url(#paint1_linear_14_397)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_iin_14_397)">
|
||||
<path d="M350.836 104.706C350.836 81.1939 733.748 72.9985 733.748 72.9985L733.734 70C733.734 70 330.58 81.9844 330.58 105.895C330.58 155.329 1214.5 123.065 1214.5 185.03C1214.5 246.994 117.771 173.59 117.771 294.228C117.771 408.603 1396.24 328.112 1396.24 496.29C1396.24 601.889 -349.649 573.741 -349.649 573.741L-338.498 577.159C-338.498 577.159 1464.35 665.697 1464.35 501.531C1464.35 303.579 164.313 369.848 164.313 292.634C164.313 191.663 1262.93 281.874 1262.93 181.829C1262.93 110.339 350.836 128.218 350.836 104.706Z" fill="url(#paint2_linear_14_397)"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_i_14_397)">
|
||||
<path id="path-bg" d="M342.354 106.078C342.354 79.7224 746.177 71 746.177 71H745.265C745.265 71 338.189 77.3265 338.189 106.078C338.189 142.816 1233.19 117.004 1233.19 185.164C1233.19 260.759 132.851 180.087 132.851 290.558C132.851 398.029 1418.02 312.02 1418.02 500.038C1418.02 623.271 -396.649 571.904 -396.649 571.904L-394.969 573.202C-394.969 573.202 1436.35 648.05 1436.35 499.038C1433.53 305.019 144.291 387.036 144.291 290.558C144.291 183.164 1240.57 268.517 1240.57 185.164C1240.57 117.221 342.354 137.505 342.354 106.078Z" fill="#CCBDA1"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_i_14_397)" mask="url(#progressMask)">
|
||||
<path id="path-fill" d="M342.354 106.112C342.354 79.7307 746.177 71 746.177 71H745.265C745.265 71 338.189 77.3325 338.189 106.112C338.189 142.885 1233.19 117.048 1233.19 185.273C1233.19 260.939 132.851 180.191 132.851 290.767C132.851 398.34 1418.02 312.25 1418.02 500.447C1418.02 623.797 -396.649 572.381 -396.649 572.381L-394.969 572.68C-394.969 572.68 1436.35 648.6 1436.35 499.446C1433.53 305.242 144.291 387.337 144.291 290.767C144.291 183.271 1240.57 268.705 1240.57 185.273C1240.57 117.265 342.354 137.568 342.354 106.112Z" fill="url(#paint3_linear_14_397)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter4_dd_14_397)">
|
||||
<path d="M41.3506 583.043C41.3506 585.084 35.0826 588 27.3506 588C19.6186 588 13.3506 584.793 13.3506 583.043C13.3506 581.294 13.3506 580 13.3506 580H41.3506C41.3506 580 41.3506 581.002 41.3506 583.043Z" fill="url(#paint4_linear_14_397)"/>
|
||||
</g>
|
||||
<ellipse cx="27.3506" cy="580.5" rx="14" ry="5.5" fill="#C19D72" />
|
||||
<ellipse cx="27.3506" cy="580.5" rx="14" ry="5.5" fill="url(#paint5_linear_14_397)" fill-opacity="0.4" />
|
||||
<g filter="url(#filter5_i_14_397)">
|
||||
<ellipse cx="27.8506" cy="580.5" rx="12.5" ry="4.5" fill="#C9A479" />
|
||||
<ellipse cx="27.8506" cy="580.5" rx="12.5" ry="4.5" fill="url(#paint6_linear_14_397)" fill-opacity="0.8" style="mix-blend-mode: color-dodge" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply" opacity="0.4" filter="url(#filter6_f_14_397)">
|
||||
<ellipse cx="2" cy="0.5" rx="2" ry="0.5" transform="matrix(1 0 0 -1 17.3506 581)" fill="#E4CAAA" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply" filter="url(#filter7_f_14_397)">
|
||||
<ellipse cx="2" cy="0.5" rx="2" ry="0.5" transform="matrix(1 0 0 -1 25.3506 581)" fill="#E4CAAA" />
|
||||
</g>
|
||||
<g style="mix-blend-mode: multiply" filter="url(#filter8_f_14_397)">
|
||||
<ellipse cx="1" cy="5e-05" rx="1" ry="5e-05" transform="matrix(1 0 0 -1 26.3506 581)" fill="#E4CAAA" />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_14_397" x="-338.749" y="67" width="1804.1" height="539" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_14_397" />
|
||||
</filter>
|
||||
<filter id="filter1_iin_14_397" x="-349.649" y="70" width="1814" height="531" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<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" />
|
||||
<feOffset dy="-2" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.758013 0 0 0 0 0.700919 0 0 0 0 0.586731 0 0 0 0.5 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_14_397" />
|
||||
<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" />
|
||||
<feOffset dy="2" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.895833 0 0 0 0 0.883702 0 0 0 0 0.839844 0 0 0 0.15 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_14_397" result="effect2_innerShadow_14_397" />
|
||||
<feTurbulence type="fractalNoise" baseFrequency="1 1" stitchTiles="stitch" numOctaves="3" result="noise" seed="8423" />
|
||||
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
|
||||
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
|
||||
<feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 " />
|
||||
</feComponentTransfer>
|
||||
<feComposite operator="in" in2="effect2_innerShadow_14_397" in="coloredNoise1" result="noise1Clipped" />
|
||||
<feFlood flood-color="rgba(213, 197, 167, 0.1)" result="color1Flood" />
|
||||
<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
|
||||
<feMerge result="effect3_noise_14_397">
|
||||
<feMergeNode in="effect2_innerShadow_14_397" />
|
||||
<feMergeNode in="color1" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="filter2_i_14_397" x="-396.649" y="71" width="1834" height="522" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<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" />
|
||||
<feOffset dx="1" dy="1" />
|
||||
<feGaussianBlur stdDeviation="0.5" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_14_397" />
|
||||
</filter>
|
||||
<filter id="filter3_i_14_397" x="-396.649" y="71" width="1834" height="522" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<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" />
|
||||
<feOffset dx="1" dy="2" />
|
||||
<feGaussianBlur stdDeviation="0.5" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.786859 0 0 0 0 0.601696 0 0 0 0 0.467828 0 0 0 0.2 0" />
|
||||
<feBlend mode="multiply" in2="shape" result="effect1_innerShadow_14_397" />
|
||||
</filter>
|
||||
<filter id="filter4_dd_14_397" x="2.67029e-05" y="570.358" width="54.7011" height="34.7011" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<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" />
|
||||
<feOffset dy="3.70849" />
|
||||
<feGaussianBlur stdDeviation="6.67528" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.472756 0 0 0 0 0.254801 0 0 0 0 0.153797 0 0 0 0.25 0" />
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_14_397" />
|
||||
<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" />
|
||||
<feOffset dy="1.4834" />
|
||||
<feGaussianBlur stdDeviation="0.741698" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.472756 0 0 0 0 0.254801 0 0 0 0 0.153797 0 0 0 0.2 0" />
|
||||
<feBlend mode="multiply" in2="effect1_dropShadow_14_397" result="effect2_dropShadow_14_397" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_14_397" result="shape" />
|
||||
</filter>
|
||||
<filter id="filter5_i_14_397" x="15.3506" y="576" width="25" height="9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<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" />
|
||||
<feOffset dx="0.528863" dy="0.528863" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.790064 0 0 0 0 0.646514 0 0 0 0 0.47733 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_14_397" />
|
||||
</filter>
|
||||
<filter id="filter6_f_14_397" x="12.1747" y="574.824" width="14.3518" height="11.3518" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="2.58795" result="effect1_foregroundBlur_14_397" />
|
||||
</filter>
|
||||
<filter id="filter7_f_14_397" x="20.1747" y="574.824" width="14.3518" height="11.3518" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="2.58795" result="effect1_foregroundBlur_14_397" />
|
||||
</filter>
|
||||
<filter id="filter8_f_14_397" x="22.6227" y="577.272" width="9.45577" height="7.45587" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="1.86394" result="effect1_foregroundBlur_14_397" />
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_14_397" x1="1577.1" y1="685.047" x2="782.331" y2="11.4077" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D9D9D9" stop-opacity="0" />
|
||||
<stop offset="0.0652711" stop-color="#737373" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_14_397" x1="560.851" y1="603.774" x2="560.851" y2="71" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.647646" stop-color="#6F5D3A" />
|
||||
<stop offset="0.85" stop-color="#D5B26F" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_14_397" x1="641.221" y1="47.9779" x2="641.221" y2="746.594" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#EFE7D7" />
|
||||
<stop offset="1" stop-color="#EFD7A6" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_14_397" x1="32.3402" y1="333.027" x2="1436.35" y2="333.027" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFC176" stop-opacity="1" />
|
||||
<stop offset="0.55" stop-color="#FF9A49" />
|
||||
<stop offset="1" stop-color="#FFC176" stop-opacity="1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_14_397" x1="14.8206" y1="583.937" x2="40.4756" y2="583.918" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AC8B61" />
|
||||
<stop offset="0.5" stop-color="#EECFA8" />
|
||||
<stop offset="1" stop-color="#AC8B61" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_14_397" x1="27.3506" y1="586" x2="27.3506" y2="575" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_14_397" x1="27.8506" y1="585" x2="27.8506" y2="576" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- MO용 게이지 SVG (767px 이하) - 모바일 라인 경로 유지, 컬러·트로피만 PC와 동일 -->
|
||||
<div class="gauge-svg-mo">
|
||||
<svg
|
||||
id="gauge-svg-mo"
|
||||
width="100%"
|
||||
height="auto"
|
||||
viewBox="0 0 339 413"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<defs>
|
||||
<!-- 진행률 마스크: stroke-dashoffset으로 채워진 구간만 노출. 초기값 전부 숨김(0%) → JS가 pathLength 기준으로 갱신 -->
|
||||
<!-- 경로 방향: 하단(-89,395)→상단(83,28) — PC와 동일하게 시작점이 하단(START). JS에서 (1-percent) 역전 보정 불필요 -->
|
||||
<mask id="progressMask_mo">
|
||||
<path
|
||||
id="maskPath-mo"
|
||||
d="M-89 395C-89 395 327.298 448.142 329.5 339.5C332.449 194 14.168 257.33 19.5 173.732C25 87.5 332.802 145.804 322.5 88C313.5 37.5 83.6078 64 81 30C79.0441 4.5 165.5 0 165.5 0H174C174 0 89 2 83.1078 27.8531"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
stroke-width="36"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="stroke-dasharray: 2000; stroke-dashoffset: 2000"
|
||||
/>
|
||||
</mask>
|
||||
<!-- PC와 동일 컬러: 트랙 그라데이션 EFE7D7 → EFD7A6 -->
|
||||
<linearGradient id="paint_track_mo" x1="151.461" y1="-15.7357" x2="151.461" y2="533.166" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#EFE7D7"/>
|
||||
<stop offset="1" stop-color="#EFD7A6"/>
|
||||
</linearGradient>
|
||||
<!-- PC와 동일: 진행률 오렌지 그라데이션 FFC176, FF9A49 -->
|
||||
<linearGradient id="paint_progress_mo" x1="0" y1="0" x2="339" y2="413" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFC176" stop-opacity="1" />
|
||||
<stop offset="0.55" stop-color="#FF9A49" />
|
||||
<stop offset="1" stop-color="#FFC176" stop-opacity="1" />
|
||||
</linearGradient>
|
||||
<!-- PC와 동일: 트로피/깃발 그라데이션 AC8B61, EECFA8 -->
|
||||
<linearGradient id="paint4_mo" x1="14.82" y1="383.937" x2="40.48" y2="383.918" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AC8B61" />
|
||||
<stop offset="0.5" stop-color="#EECFA8" />
|
||||
<stop offset="1" stop-color="#AC8B61" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_mo" x1="27.35" y1="386" x2="27.35" y2="375" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_mo" x1="27.85" y1="385" x2="27.85" y2="376" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
<filter id="filter_bg_mo" x="-80" y="0" width="420.725" height="417.473" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<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"/>
|
||||
<feOffset dy="-1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.758013 0 0 0 0 0.700919 0 0 0 0 0.586731 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_mo"/>
|
||||
<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"/>
|
||||
<feOffset dy="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.895833 0 0 0 0 0.883702 0 0 0 0 0.839844 0 0 0 0.15 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_mo" result="effect2_innerShadow_mo"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="1 1" stitchTiles="stitch" numOctaves="3" result="noise" seed="8423" />
|
||||
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
|
||||
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
|
||||
<feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/>
|
||||
</feComponentTransfer>
|
||||
<feComposite operator="in" in2="effect2_innerShadow_mo" in="coloredNoise1" result="noise1Clipped" />
|
||||
<feFlood flood-color="rgba(213, 197, 167, 0.1)" result="color1Flood" />
|
||||
<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
|
||||
<feMerge result="effect3_noise_mo">
|
||||
<feMergeNode in="effect2_innerShadow_mo" />
|
||||
<feMergeNode in="color1" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="filter_base_mo" x="-89" y="0" width="429" height="413.219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<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"/>
|
||||
<feOffset dx="1" dy="1"/>
|
||||
<feGaussianBlur stdDeviation="0.5"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_base_mo"/>
|
||||
</filter>
|
||||
<!-- 트로피 그림자 (PC와 동일 스타일) -->
|
||||
<filter id="filter_flag_mo" x="-25" y="365" width="80" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<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" />
|
||||
<feOffset dy="2" />
|
||||
<feGaussianBlur stdDeviation="2" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.472756 0 0 0 0 0.254801 0 0 0 0 0.153797 0 0 0 0.25 0" />
|
||||
<feBlend mode="multiply" in2="BackgroundImageFix" result="effect1_dropShadow_mo" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_mo" result="shape" />
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- 1) 배경: 모바일 라인 bg1 경로 + PC 동일 컬러(EFE7D7→EFD7A6) -->
|
||||
<g filter="url(#filter_bg_mo)">
|
||||
<path d="M84.4992 29C93.4992 0 196.5 1 196.5 1L166.5 0C166.5 0 79.9715 4.2353 78.8967 29.7713C78.8967 68.6117 320.499 39.3452 320.499 91.9475C320.499 144.55 17.5 82.9594 17.5 177.744C21 258 327.499 198.985 327.499 338C327.499 440 -80.0007 397.357 -80.0007 397.357L-77.3959 400.043C-77.3959 400.043 332.015 465.578 340.498 342.5C350.363 199.378 34.4539 241.648 27.4985 177.744C18.9143 98.8752 332.62 151.112 328.5 91.9475C324.5 34.5 75.4992 58 84.4992 29Z" fill="url(#paint_track_mo)"/>
|
||||
</g>
|
||||
<!-- 2) 베이스 트랙: 모바일 라인 1 + PC 동일 베이지 #CCBDA1 -->
|
||||
<g filter="url(#filter_base_mo)">
|
||||
<path d="M83.1078 27.8531C89 2 174 0 174 0H165.5C165.5 0 79.0441 4.5 81 30C83.6078 64 313.5 37.5 322.5 88C332.802 145.804 25 87.5 19.5 173.732C14.168 257.33 332.449 194 329.5 339.5C327.298 448.142 -89 395 -89 395C-89 395 339 460.5 339 336C335.5 198.961 33 245.5 25.5 175.5C24 99.7683 322.5 143.5 326.5 93.5C331.179 35.014 75.6673 60.5 83.1078 27.8531Z" fill="#CCBDA1"/>
|
||||
</g>
|
||||
<!-- 3) 진행률: PC와 동일 오렌지 그라데이션 -->
|
||||
<g mask="url(#progressMask_mo)">
|
||||
<path d="M83.1078 27.8531C89 2 174 0 174 0H165.5C165.5 0 79.0441 4.5 81 30C83.6078 64 313.5 37.5 322.5 88C332.802 145.804 25 87.5 19.5 173.732C14.168 257.33 332.449 194 329.5 339.5C327.298 448.142 -89 395 -89 395C-89 395 339 460.5 339 336C335.5 198.961 33 245.5 25.5 175.5C24 99.7683 322.5 143.5 326.5 93.5C331.179 35.014 75.6673 60.5 83.1078 27.8531Z" fill="url(#paint_progress_mo)"/>
|
||||
</g>
|
||||
<!-- 4) 트로피/깃발: PC와 동일 컬러·스타일, 모바일 경로 시작점(-89,395) 근처 배치 -->
|
||||
<g filter="url(#filter_flag_mo)">
|
||||
<path d="M31.35 393.04C31.35 395.08 25.08 398 17.35 398C9.62 398 3.35 394.79 3.35 393.04C3.35 391.29 3.35 390 3.35 390H31.35C31.35 390 31.35 391 31.35 393.04Z" fill="url(#paint4_mo)"/>
|
||||
</g>
|
||||
<ellipse cx="17.35" cy="390.5" rx="9" ry="3.5" fill="#C19D72" />
|
||||
<ellipse cx="17.35" cy="390.5" rx="9" ry="3.5" fill="url(#paint5_mo)" fill-opacity="0.4" />
|
||||
<ellipse cx="17.85" cy="390.5" rx="8" ry="3" fill="#C9A479" />
|
||||
<ellipse cx="17.85" cy="390.5" rx="8" ry="3" fill="url(#paint6_mo)" fill-opacity="0.8" style="mix-blend-mode: color-dodge" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* PC/모바일 게이지 전환 (768px 기준) */
|
||||
.gauge-svg-pc { display: block; }
|
||||
.gauge-svg-mo { display: none; }
|
||||
@media (max-width: 767px) {
|
||||
.gauge-svg-pc { display: none; }
|
||||
.gauge-svg-mo { display: block; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user