[wg01] SVG
srngch opened this issue · comments
- https://developer.mozilla.org/en-US/docs/Web/SVG
- 기본 엘리먼트 & 속성
- 컬러, 스트로크(일반, dash)
(하나의 화면 안에 다른 좌표를 줘서)
라인 그리기
직사각형 그리기
모서리가 둥근 사각형 그리기
원 그리기
타원 그리기- 클리핑 마스킹(사진을 별, 하트 모양에만 보이게) https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
폴리곤 그리기 (별)
곡선 그리기 (하트)
이미지 클리핑, 마스킹- 복잡한 도형 그리기
<:3 ) ~
단순한 고양이 얼굴 그리기
- 얼굴 원형 그라디언트
- 귀 라인 그라디언트
얼굴 요소별로 그룹 사용하기: 얼굴 전체 그룹, 양쪽 귀, 양쪽 눈
- 얼굴은 6각형
- 귀는 세모
- 코는 세모 역삼각형
- 수염 직선 양쪽에 3개 씩- 앞에서 만든걸 패턴으로 반복시키기
고양이 바둑판 반복Instructions
- svg 요소가 들어갈 html는 아래 구조로 지켜야합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<!-- 여기 svg를 작성하기-->
</body>
</html>- 본 서브젝트에서 좌표는
(x, y)형식으로 안내 되어있습니다.
Exercises
- svg 요소 만들고, 도형들 그리기(rect, 둥근rect, circle, ellipse), 도형은 fill
- svg 도형2(polyline vs. polygon, line vs. path), 스트로크 점선
- 기본 도형에 그라디언트 넣기(linearGradient), 3가지 stop, 수직
- [보너스] linear 외의 다른 그라디언트 5개까지 해보기..(0~5점)
- 수평
- 대각선
- stop 4개 이상 써보기
- radial 기본
- radial 초점 이동
- [보너스] linear 외의 다른 그라디언트 5개까지 해보기..(0~5점)
- 클리핑(하트 모양 path로 이미지를 하트 모양으로만 보이게 하기), 마스크(svg image요소에 그라디언트 마스크 적용하기, radialGradient)
- 복잡한 도형 그리기 - 고양이 얼굴
- 실제로는 그래픽툴을 사용하지만 응용을 해본다는 안내...
- 지정된 도형을 사용해서 자유롭게 고양이 얼굴을 그려보세요.
- [보너스] 클리핑이나 마스크를 사용해도 됩니다.
- 앞에서 만든 고양이 얼굴을 바둑판 배턴으로 100vw, 100vh 사이즈로 채우기
examples
ex00
ex01
ex02
필수
보너스
ex03
하트가 너무 어려워서 팩맨으로 바꿨어요 😅
