10. SVG Gradient

---

📌 svg-tutorial 으로 학습한 내용을 정리했습니다.

SVG Tutorial - Learn how to code images in HTML with SVG

---

• 그라데이션으로 채우기와 3D 효과를 줄 수 있다.

크리스마스 장식 업그레이드

• 크리스마스 장식품을 업그레이드 하자.
• 기본 원을 그라데이션으로 채우민 미묘한 3D 효과를 추가할 수 있다.
• defs섹션에서 radialGradient를 정의한다. CSS와는 다른 구문이지만 비슷한 기능을 한다.
• id를 정의하고, 색을 표현한다. fill 속성에 id값으로 사용할 수 있다.

See the Pen Day 10-1 by hi (@lbdasdbt-the-selector) on CodePen.

---

눈사람 만들기

• 원을 그라데이션으로 채운다.

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
  style="background-color: lightblue"
>
  <defs>
    <radialGradient id="snowball" cx="0.25" cy="0.25" r="1">
      <stop offset="0%" stop-color="white" />
      <stop offset="50%" stop-color="white" />
      <stop offset="100%" stop-color="#d6d6d6" />
    </radialGradient>
  </defs>

  <circle cx="0" cy="0" r="80" fill="url(#snowball)" />
</svg>

• 같은 원을 2개 그려 얼굴과 몸통을 완성한다.

<svg
  width="200"
  height="400"
  viewBox="-100 -100 200 200"
  style="background-color: lightblue"
>
  <defs>
    <radialGradient id="snowball" cx="0.25" cy="0.25" r="1">
      <stop offset="0%" stop-color="white" />
      <stop offset="50%" stop-color="white" />
      <stop offset="100%" stop-color="#d6d6d6" />
    </radialGradient>
  </defs>

  <circle cx="0" cy="60" r="80" fill="url(#snowball)" />
  <circle cx="0" cy="-40" r="50" fill="url(#snowball)" />
</svg>

• 얼굴에 다각형 코를 추가하고 원 두개로 눈, 선으로 팔을 추가한다.

See the Pen Day10-2 by hi (@lbdasdbt-the-selector) on CodePen.

 

---