kyeongmin
51548fdc41
figma_to_html_agent/: - Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등) - block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등) - templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml - figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋 - scripts/: gradient_math.py 등 유틸리티 설정: - .mcp.json: Figma MCP 서버 연결 설정 - .claude/settings.json: Claude Code 프로젝트 설정 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
121 lines
5.3 KiB
HTML
121 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>venn SVG premium test</title>
|
|
<style>
|
|
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
|
|
body { font-family: "Pretendard Variable", sans-serif; background: #e0e5ea; display: flex; justify-content: center; padding: 30px; margin: 0; }
|
|
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; gap: 16px; }
|
|
.desc { font-size: 14px; color: #444; text-align: center; line-height: 1.7; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="block-container">
|
|
|
|
<svg viewBox="0 0 600 550" width="500" height="460" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
|
|
<defs>
|
|
<!-- 배경 그라데이션 (연한 회색→흰) -->
|
|
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#dce3ea" />
|
|
<stop offset="100%" stop-color="#f0f2f5" />
|
|
</linearGradient>
|
|
|
|
<!-- 큰 파란 원 그라데이션 -->
|
|
<radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
|
|
<stop offset="0%" stop-color="#2979ff" />
|
|
<stop offset="40%" stop-color="#1565c0" />
|
|
<stop offset="100%" stop-color="#0d47a1" />
|
|
</radialGradient>
|
|
|
|
<!-- 주황→마젠타 원 -->
|
|
<radialGradient id="orangeGrad" cx="35%" cy="35%" r="65%">
|
|
<stop offset="0%" stop-color="#ffab40" />
|
|
<stop offset="40%" stop-color="#ff6d00" />
|
|
<stop offset="100%" stop-color="#c2185b" />
|
|
</radialGradient>
|
|
|
|
<!-- 민트/틸 원 -->
|
|
<radialGradient id="mintGrad" cx="40%" cy="30%" r="65%">
|
|
<stop offset="0%" stop-color="#80deea" />
|
|
<stop offset="40%" stop-color="#26c6da" />
|
|
<stop offset="100%" stop-color="#00897b" />
|
|
</radialGradient>
|
|
|
|
<!-- 골드 원 -->
|
|
<radialGradient id="goldGrad" cx="40%" cy="30%" r="65%">
|
|
<stop offset="0%" stop-color="#ffd54f" />
|
|
<stop offset="40%" stop-color="#ffb300" />
|
|
<stop offset="100%" stop-color="#e65100" />
|
|
</radialGradient>
|
|
|
|
<!-- 하이라이트 (구체 광택) -->
|
|
<radialGradient id="highlight" cx="35%" cy="25%" r="40%">
|
|
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
|
|
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
|
|
</radialGradient>
|
|
|
|
<!-- 글로우 필터 -->
|
|
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="8" result="blur" />
|
|
<feMerge>
|
|
<feMergeNode in="blur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- 그림자 -->
|
|
<filter id="shadow">
|
|
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
|
|
</filter>
|
|
|
|
<!-- 큰 원 안쪽 그림자 (깊이감) -->
|
|
<filter id="innerDepth" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="15" result="blur" />
|
|
<feOffset dx="0" dy="5" result="offsetBlur" />
|
|
<feComposite in="SourceGraphic" in2="offsetBlur" operator="over" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- 배경 -->
|
|
<rect width="600" height="550" fill="url(#bgGrad)" rx="0" />
|
|
|
|
<!-- 큰 파란 원 + 동심원 링 (바깥→안쪽) -->
|
|
<circle cx="300" cy="270" r="230" fill="url(#blueOuter)" filter="url(#shadow)" />
|
|
<circle cx="300" cy="270" r="220" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
|
|
<circle cx="300" cy="270" r="205" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
|
|
<circle cx="300" cy="270" r="190" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
|
|
<circle cx="300" cy="270" r="175" fill="none" stroke="#7ab8ec" stroke-width="0.6" opacity="0.2" />
|
|
|
|
<!-- 주황→마젠타 원 (가장 큼, 좌측) -->
|
|
<circle cx="265" cy="300" r="120" fill="url(#orangeGrad)" opacity="0.92" filter="url(#glow)" />
|
|
<circle cx="265" cy="300" r="120" fill="url(#highlight)" />
|
|
|
|
<!-- 민트 원 (우상) -->
|
|
<circle cx="370" cy="230" r="75" fill="url(#mintGrad)" opacity="0.9" filter="url(#glow)" />
|
|
<circle cx="370" cy="230" r="75" fill="url(#highlight)" />
|
|
|
|
<!-- 골드 원 (우하) -->
|
|
<circle cx="365" cy="355" r="75" fill="url(#goldGrad)" opacity="0.9" filter="url(#glow)" />
|
|
<circle cx="365" cy="355" r="75" fill="url(#highlight)" />
|
|
|
|
<!-- 텍스트: 디지털 전환 (큰 원 상단) -->
|
|
<text x="300" y="95" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
|
|
<text x="300" y="125" text-anchor="middle" fill="#ffffff" font-size="26" font-weight="900">디지털 전환(D/X)</text>
|
|
|
|
<!-- 텍스트: Digital Twin (주황 원 중앙) -->
|
|
<text x="250" y="295" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">Digital Twin</text>
|
|
<text x="250" y="318" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">(Metaverse)</text>
|
|
|
|
<!-- 텍스트: BIM (민트 원 중앙) -->
|
|
<text x="370" y="237" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">BIM</text>
|
|
|
|
<!-- 텍스트: GIS (골드 원 중앙) -->
|
|
<text x="365" y="362" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">GIS</text>
|
|
</svg>
|
|
|
|
<div class="desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |