원형 글자 생성기

원을 따라 흐르는 글자는 둥근 로고, 카페 뱃지, 도장, 스티커, 인장 디자인의 기본입니다. 이 생성기는 글자 하나하나를 원을 따라 배치해 바깥쪽을 향하게 돌리고, 아래쪽 글자는 뒤집어서 왼쪽에서 오른쪽으로 읽히게 합니다. 링 선을 한두 줄 넣고 가운데에 별이나 글자를 넣으면 전형적인 뱃지가 되고, 바로 쓸 수 있는 투명 PNG나 수정하고 확대할 수 있는 SVG로 내려받을 수 있습니다. 모든 작업은 브라우저 안에서 이뤄집니다.

사용 방법

1. 위쪽 글자를 입력하고, 뱃지를 만들려면 아래쪽 글자도 입력합니다.
2. 위·아래 호로 할지, 위쪽 글자를 원 전체에 펼칠지 고릅니다.
3. 반지름, 글꼴, 크기, 글자 간격을 정하고, 회전으로 글자 위치를 옮깁니다.
4. 링 선, 가운데 별이나 글자를 넣고 색과 배경을 고릅니다.
5. PNG나 SVG를 내려받거나 SVG 코드를 복사합니다.

계산식

글자당 각도 = (글자 너비 + 간격) ÷ r_mid · 위치 = (C + r·sin θ, C − r·cos θ)

θ는 맨 위에서 시계 방향으로 잽니다. r_mid는 글자 띠의 한가운데이고, 띠는 r부터 r + 0.9 × 글자 크기까지입니다(안쪽 글자는 r − 0.9 × 크기부터 r까지). 위쪽 글자는 안쪽 가장자리에 서서 θ만큼 돌고, 아래쪽 글자는 바깥쪽 가장자리에 매달려 θ − 180°만큼 돌아 똑바로 서 있게 됩니다. 전체 원 모드에서는 남는 둘레를 글자들이 똑같이 나눠 가집니다.

예시

반지름 200, 글자 40 px이면 띠는 200–236 px이므로 r_mid = 218 px입니다. 너비 26 px인 글자에 간격 4 px을 더하면 30 ÷ 218 = 0.138 rad, 약 7.9°를 차지하므로 20글자짜리 위쪽 글자는 대략 158°를 덮습니다. 링을 둘 다 넣으면 이미지는 508 × 508 px입니다. 바깥 링은 236 + 8.8 = 244.8 px에, 양쪽에 선 굵기 절반 1 px과 여백 8 px이 더해집니다.