漢 in Animated SVG

 

 

 

코드:

 

<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360">
    <rect width="100%" height="100%" fill="#fff" />
    <g fill="none" stroke-linejoin="round" class="character_group">
        <path stroke="#AAA" stroke-linecap="round" stroke-opacity="1.0" stroke-width="21.6" d="M90 55 L130 100 M90 145 L130 175 M90 320 L130 220 M155 70 L320 70 M185 50 L185 110 M290 50 L290 110 M185 110 L290 110 M170 145 L170 185 M170 145 L305 145 l0 40 M170 185 L305 185 M165 220 L310 220 M165 255 L310 255 M237.5 110 L237.5 255 L165 320 M237.5 255 L310 320" />
        <path stroke="#202020" stroke-dasharray="61" stroke-dashoffset="61" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M90 55 L130 100">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.0714;1" repeatCount="indefinite" values="61;0;0" />
        </path>
        <!--60.207972894여야 하는데 stroke-dasharray나 stroke-dashoffset이 소수점을 못알아먹어서 정수로 바꾸는데 반올림이나 내림은 안되니까 무조건 올림한 61-->
        <path stroke="#202020" stroke-dasharray="50" stroke-dashoffset="50" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M90 145 L130 175">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.0714;0.1428;1" repeatCount="indefinite" values="50;50;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="108" stroke-dashoffset="108" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M90 320 L130 220">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.1428;0.2142;1" repeatCount="indefinite" values="108;108;0;0" />
        </path>
        <!--107.7032961427여야 하는데 stroke-dasharray나 stroke-dashoffset이 소수점을 못알아먹어서 정수로 바꾸는데 반올림이나 내림은 안되니까 무조건 올림한 108-->
        <path stroke="#202020" stroke-dasharray="165" stroke-dashoffset="165" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M155 70 L320 70">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.2142;0.2857;1" repeatCount="indefinite" values="165;165;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="60" stroke-dashoffset="60" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M185 50 L185 110">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.2857;0.3571;1" repeatCount="indefinite" values="60;60;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="60" stroke-dashoffset="60" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M290 50 L290 110">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.3571;0.4285;1" repeatCount="indefinite" values="60;60;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="105" stroke-dashoffset="105" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M185 110 L290 110">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.4285;0.5;1" repeatCount="indefinite" values="105;105;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="40" stroke-dashoffset="40" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M170 145 L170 185">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.5;0.5714;1" repeatCount="indefinite" values="40;40;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="175" stroke-dashoffset="175" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M170 145 L305 145 l0 40">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.5714;0.6428;1" repeatCount="indefinite" values="175;175;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="135" stroke-dashoffset="135" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M170 185 L305 185">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.6428;0.7142;1" repeatCount="indefinite" values="135;135;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="145" stroke-dashoffset="145" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M165 220 L310 220">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.7142;0.7857;1" repeatCount="indefinite" values="145;145;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="145" stroke-dashoffset="145" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M165 255 L310 255">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.7857;0.8571;1" repeatCount="indefinite" values="145;145;0;0" />
        </path>
        <path stroke="#202020" stroke-dasharray="243" stroke-dashoffset="243" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M237.5 110 L237.5 255 L165 320">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.8571;0.9285;1" repeatCount="indefinite" values="243;243;0;0" />
        </path>
        <!--242.3717104708여야 하는데 stroke-dasharray나 stroke-dashoffset이 소수점을 못알아먹어서 정수로 바꾸는데 반올림이나 내림은 안되니까 무조건 올림한 243-->
        <path stroke="#202020" stroke-dasharray="98" stroke-dashoffset="98" stroke-linecap="square" stroke-opacity="0.8" stroke-width="14.4" d="M237.5 255 L310 320">
            <animate attributeName="stroke-dashoffset" begin="0s" calcMode="linear" dur="16s" keyTimes="0;0.9285;1" repeatCount="indefinite" values="98;98;0" />
        </path>
        <!--97.3717104708여야 하는데 stroke-dasharray나 stroke-dashoffset이 소수점을 못알아먹어서 정수로 바꾸는데 반올림이나 내림은 안되니까 무조건 올림한 98-->
    </g>
</svg>

모양이 좀 그렇네요. 특히 삼수변이... 삼수변의 3개의 점이 밸런스가 안맞아서...(대충 맨 위에 점이 너무 선이 경사졌고, 아래쪽 점의 선이 좀 길다는 것? ) 그 전에 삼수변이 너무 큽니다. ㅋㅋㅋㅋㅋㅋㅋ

 

그리고 애니메이션도 각 획을 긋는 시간도 획의 길이 자체는 신경쓰지 않고 그냥 14획이니까 각 획당 1/14를 부여해서 어떤건 긴 획인데 같은 시간이니 더 빠르고, 어떤 획은 같은 시간동안 짧은 획이니 더 느리게 그어집니다.

사실 이거야 비례배분(예를들어 첫획이 길이가 40이고 둘째 획이 길이가 100이고 셋째 획이 길이가 60인 3획짜리 한자가 있다고 합시다. 이거야 40:100:60이니까 전체 시간을 1로 놓고 1*{40/(40+100+60)} 즉 0.2를 첫획 긋는데 걸리는 시간, 1*{100/(40+100+60)} 즉 0.5를 둘째 획 시간, 1*{60/(40+100+60)} 즉 0.3을 셋째 획 시간으로 치는겁니다. ) 쓰면 복잡한 수학이 필요 없겠지만, 14획이라서 14번을 다 일일이 계산해야되는데다가 다 길이가 깔끔하지 않고 더럽게 끝나는걸 붙잡고 계산기의 나눗셈버튼과 씨름하고 싶지 않았습니다.

 

또한 곡선이 없는데, 이 경우는 이유가 svg로 곡선 그리기가 매우 어렵다는것입니다. 만약 한나라 한의 곡선을 제대로 표현하려면  svg path태그의 d속성에 A명령어를 집어넣어야 하는데(C 명령어는 저런 휜 각도가 완만한거 못그리고 무조건 일정하게 휜걸 그려버림) 귀찮고 복잡합니다. 게다가 획 길이 맞추려면 타원에,호 길이가 어쩌니 진짜 머리 아픈 계산이 필요해서 시원하게 곡선 없이 만들었습니다.

 

'움직이는 한자 이미지 공유' 카테고리에 게시된 한자 SVG는 전부 복잡한 저작권 제한 없이 푸는 이미지입니다. 단, 그대로 갖다 쓸때 본인이 만들었다고 거짓말하지는 마세요. 구글렌즈로 이미지 검색해도 나올겁니다. 코드를 직접 건드려 개조해서 쓸때는 본인의 기여도 들어갔으니 '내가 만듦'이라고 반쯤 구라쳐도 되는데 그대로 복붙할거면 저작자 속이지 말아주세요. 부탁입니다. 그냥 출처 안밝히는것까진 상관 없는데 남이 만든거 본인이 만든거라고 저작자를 속이지는 마세요.