韓 in animated SVG

 

 

코드:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="360">
<rect width="100%" height="100%" fill="#ffffff" />
<g class="character_group">
<path d="M90 95 170 95 M130 50 130 50 130 135 M90 135 90 225 M90 135 170 135 170 135 170 225 M90 135 M90 180 170 180 M90 225 170 225 M90 265 170 265 M130 225 130 320 M210 75 295 75 295 75 295 110 M260 50 M260 50 260 110 M200 110 320 110 M215 135 215 190 M215 135 305 135 305 135 305 190 M215 190 M215 190 305 190 M200 220 320 220 M215 220 215 260 215 260 310 260 M260 220 M260 220 260 320" fill="none" stroke="#AAAAAA" stroke-opacity="1.0" stroke-width="21.6" stroke-linejoin="round" stroke-linecap="round" />
<path d="M90 95 170 95" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="80" stroke-dashoffset="80">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.04;1" values="80;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M130 50 130 135" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="85" stroke-dashoffset="85">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.04;0.0625;1" values="85;85;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M90 135 90 225" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="90" stroke-dashoffset="90">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.0625;0.125;1" values="90;90;0;0" repeatCount="indefinite" calcMode="linear" /></path>

<path d="M90 135 170 135 170 135 170 225 M90 135" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="170" stroke-dashoffset="170">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.125;0.1875;1" values="170;170;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M90 180 170 180" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="80" stroke-dashoffset="80">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.1875;0.25;1" values="80;80;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M90 225 170 225" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="80" stroke-dashoffset="80">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.25;0.3125;1" values="80;80;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M90 265 170 265" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="80" stroke-dashoffset="80">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.3125;0.375;1" values="80;80;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M130 225 130 320" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="95" stroke-dashoffset="95">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.375;0.4375;1" values="95;95;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M210 75 295 75 295 75 295 110 M260 50" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="120" stroke-dashoffset="120">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.4375;0.50;1" values="120;120;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M260 50 260 110" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="60" stroke-dashoffset="60">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.50;0.5625;1" values="60;60;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M200 110 320 110" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="120" stroke-dashoffset="120">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.5625;0.625;1" values="120;120;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M215 135 215 190" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="55" stroke-dashoffset="55">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.625;0.6875;1" values="55;55;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M215 135 305 135 305 135 305 190 M215 190" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="145" stroke-dashoffset="145">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.6875;0.75;1" values="145;145;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M215 190 305 190" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="90" stroke-dashoffset="90">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.75;0.8125;1" values="90;90;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M200 220 320 220" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="120" stroke-dashoffset="120">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.8125;0.875;1" values="120;120;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M215 220 215 260 215 260 310 260 M260 220" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="135" stroke-dashoffset="135">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.875;0.9375;1" values="135;135;0;0" repeatCount="indefinite" calcMode="linear" />
</path>
<path d="M260 220 260 320" fill="none" stroke="#202020" stroke-opacity="0.8" stroke-width="14.4" stroke-linejoin="round" stroke-linecap="square" stroke-dasharray="100" stroke-dashoffset="100">
<animate begin="0s" dur="12s" attributeName="stroke-dashoffset" keyTimes="0;0.9375;1" values="100;100;0" repeatCount="indefinite" calcMode="linear" />
</path>
</g>
</svg>

 

 

애니메이션이 각 획을 긋는데 걸리는 시간도 획의 길이 자체는 신경쓰지 않고 그냥 17획인데 17로 나누기 불편해서 각 획당 1/16를 부여한뒤 첫 획과 두번째 획만 시간을 나눴습니다. 그래서 어떤건 긴 획인데 같은 시간이니 더 빠르고, 어떤 획은 같은 시간동안 짧은 획이니 더 느리게 그어집니다.

사실 이거야 비례배분(예를들어 첫획이 길이가 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는 전부 복잡한 저작권 제한 없이 푸는 이미지입니다. 단, 그대로 갖다 쓸때 본인이 만들었다고 거짓말하지는 마세요. 구글렌즈로 이미지 검색해도 나올겁니다. 코드를 직접 건드려 개조해서 쓸때는 본인의 기여도 들어갔으니 '내가 만듦'이라고 반쯤 구라쳐도 되는데 그대로 복붙할거면 저작자 속이지 말아주세요. 부탁입니다. 그냥 출처 안밝히는것까진 상관 없는데 남이 만든거 본인이 만든거라고 저작자를 속이지는 마세요.