◯도형

원·별·하트 같은 도형을 거리 함수(SDF)로 그립니다. 마스크나 재질 효과의 모양으로도 씁니다. — 16개 항목

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

원Circle

캔버스에 채워진 원을 그리며, 크기와 가장자리의 부드러움을 조절할 수 있습니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

타원Ellipse

가로와 세로 반지름을 따로 조절해 납작하거나 길쭉한 타원을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

둥근 사각형Rounded Rect

가로·세로 크기와 모서리 둥글기를 조절하는 사각형입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

정다각형Polygon

변의 수와 꼭짓점의 둥글기를 조절해 삼각형부터 원에 가까운 다각형까지 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

별Star

뾰족한 별 꼭짓점 수와 안쪽 골의 깊이를 조절하는 별 도형입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

하트Heart

크기와 방향을 조절할 수 있는 채워진 하트 실루엣입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

링Ring

중심선 반지름과 띠 두께를 조절하는 도넛형 고리입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

부채꼴Arc

중심에서 바깥쪽으로 펼쳐지는 부채꼴의 반지름과 열림 각도를 조절합니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

초승달Crescent

큰 원에서 옆으로 이동한 작은 원 부분을 덜어 초승달 실루엣을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

십자Cross

가로·세로 팔의 길이와 폭, 모서리 둥글기를 조절하는 플러스형 도형입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

꽃 모양Flower

꽃잎 수와 안쪽 골의 깊이를 조절하는 방사형 꽃 모양입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

평행사변형Parallelogram

가로·세로 크기와 한쪽 변의 기울기를 조절하는 평행사변형입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

사다리꼴Trapezoid

위쪽과 아래쪽 폭을 따로 정해 사다리꼴의 실루엣을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

물방울Teardrop

둥근 몸통에서 뾰족한 끝으로 이어지는 물방울 실루엣입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

렌즈형 (베시카 피스키스)Vesica

겹치는 두 원이 만드는 렌즈 모양의 교집합입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

선Line

두 점을 잇는 선을 그리고 굵기와 실선·점선·파선 스타일을 조절합니다.