11. SVG quadratic bezier, 2차 베지에 곡선

---

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

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

---

• 2차 베지에 곡선으로 다양한 경로를 그릴 수 있다.
• 곡선에 끝 점을 설정하는 것 뿐만 아니라 제어점도 설정해야 한다.
  • 제어점은 선이 구부러지기는 하지만, 닿지 않는 보이지 않는 좌표이다.

---

표정

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <circle cx="-50" cy="-50" r="20" />
  <circle cx="50" cy="-50" r="20" />
  <path
    d="
      M -70,50 
      Q 0,100 70,50"
    fill="none"
    stroke="black"
    stroke-width="10"
    stroke-linecap="round"
  />
</svg>

• 여기서 제어점은 이미지 하단 중앙(0, 100)에 위치한다.
• 제어점이 반드시 두 끝점의 동일한 거리에 있을 필요는 없다.

SVG Curves에서 예시를 볼 수 있다.

---

트리

• 경로가 아래로 내려갈수록 제어점이 트리 중심에서 점점 멀어지게 표현하면 다음과 같다.
• 2차 베지에를 두 개의 선분으로 나눈 것과 비교하면 다음과 같다.

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

 

 

---