Cover
(README 없음)
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard height=300 -->
<style>
html,body{margin:0}
.cover{width:960px;height:300px}
.cover .txt{position:absolute;left:var(--space-18);top:50%;transform:translateY(-50%);z-index:2}
.cover .lens{position:absolute;right:96px;top:50%;width:240px;height:240px;margin-top:-120px;z-index:1}
.cover .lens svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(var(--shadow-lens))}
</style>
<div class="sl sl-ambient cover">
<div class="txt"><h1 class="sl-entry__title"><span class="sl-wordmark sl-wordmark--xl"><span class="sl-wordmark__text">Sk<span class="r1">i</span><span class="r2">l</span><span class="r3">l</span>Lens</span></span></h1><p class="sl-rotline">스킬을 보는 눈</p></div>
<div class="lens" aria-hidden="true"><svg viewBox="0 0 240 240" role="img" aria-label="SkillLens"><defs><linearGradient id="mk1-gb" x1="0.7" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#eceeff"/><stop offset="0.22" stop-color="#9a9cf8"/><stop offset="0.5" stop-color="#5450e9"/><stop offset="0.8" stop-color="#4f46e5"/><stop offset="1" stop-color="#4a44d8"/></linearGradient><linearGradient id="mk1-gbe" x1="0" y1="0.2" x2="1" y2="0.8"><stop offset="0" stop-color="#f3f4ff"/><stop offset="0.35" stop-color="#cdd2ff" stop-opacity="0.9"/><stop offset="1" stop-color="#8f93f7" stop-opacity="0.3"/></linearGradient><radialGradient id="mk1-gbg" cx="0.72" cy="0.18" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.45" stop-color="#fff" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="mk1-gbs" cx="0.35" cy="0.85" r="0.7"><stop offset="0" stop-color="#2e2bb8" stop-opacity="0.35"/><stop offset="1" stop-color="#2e2bb8" stop-opacity="0"/></radialGradient><linearGradient id="mk1-gf" x1="0.1" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.5"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.78" stop-color="#f3ffe2"/><stop offset="0.92" stop-color="#d3ff9a"/><stop offset="1" stop-color="#b6ff75"/></linearGradient><linearGradient id="mk1-go" x1="0.15" y1="0" x2="0.85" y2="1"><stop offset="0" stop-color="#b3ecff"/><stop offset="0.28" stop-color="#5fb0ff"/><stop offset="0.6" stop-color="#3f4fe3"/><stop offset="0.85" stop-color="#5f74f0"/><stop offset="1" stop-color="#8d9cf5"/></linearGradient><linearGradient id="mk1-ge" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="0.6" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#eaffd4" stop-opacity="0.4"/></linearGradient><clipPath id="mk1-cb"><ellipse cx="-24" cy="0" rx="84" ry="98" ></ellipse></clipPath><clipPath id="mk1-cbi"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" ></ellipse></clipPath><clipPath id="mk1-cf"><ellipse cx="24" cy="0" rx="84" ry="98" ></ellipse></clipPath></defs><g transform="translate(120 120) rotate(28)"><g clip-path="url(#mk1-cb)"><ellipse cx="-24" cy="0" rx="84" ry="98" fill="url(#mk1-gbe)"></ellipse><g clip-path="url(#mk1-cbi)"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk1-gb)"></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk1-gbs)"></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk1-gbg)"></ellipse></g></g><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk1-gf)"></ellipse><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk1-go)" clip-path="url(#mk1-cb)" opacity="0.93"></ellipse><g clip-path="url(#mk1-cf)"><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk1-ge)"></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mk1-gf)"></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mk1-go)" clip-path="url(#mk1-cb)" opacity="0.93"></ellipse></g><ellipse cx="-24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.6"></ellipse><ellipse cx="24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.8"></ellipse></g></svg></div>
</div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.