SVGを使用したアニメーション

実現したいこと

Illustratorで書き出したSVGを使ってアニメーションを作成したいです。
最終的には文字を手書き風に書き出したいです。

発生している問題

↓Illustratorで作ったSVG

左上から右下にかけてパスを通しています。このパス通りにアニメーションして欲しいです。
Illustratorの線幅ツールを使って線を太くしています。

↓HTMLにPATHを貼ってCSSを設定、実行
左上から上を通って右下、右下から下を通って左上へとアウトラインをなぞるようにアニメーションしてしまいます。
左上から右下へとアニメーションして欲しい...!!

コード

HTML
1<svg viewBox="0 0 305.65 259.76"><line x1="0.32" y1="0.38" x2="305.32" y2="259.38"/>
2<path class="path" d="M144.82,253.12a191.9,191.9,0,0,1,28.55,5c9,2.23,17.76,4.84,26.21,7.77s16.65,6.14,24.62,9.64c2,.84,4,1.78,5.94,2.67S234.08,280,236,281q5.82,2.81,11.5,5.77A423,423,0,0,1,330.2,343.9a479.72,479.72,0,0,1,68.71,73.64c2.54,3.44,5.08,6.88,7.53,10.44s4.89,7.13,7.29,10.74q7.11,10.93,13.65,22.55c4.34,7.77,8.46,15.81,12.27,24.19a209,209,0,0,1,10.17,26.66l-.64.76a207.53,207.53,0,0,1-28-5.72c-8.89-2.4-17.48-5.16-25.85-8.18s-16.51-6.32-24.47-9.82c-3.95-1.79-7.91-3.57-11.78-5.46s-7.72-3.78-11.53-5.74A479.09,479.09,0,0,1,263.8,422.1,423.7,423.7,0,0,1,194,349.78c-2.58-3.41-5.09-6.9-7.56-10.42q-1.86-2.64-3.65-5.36c-1.2-1.81-2.44-3.57-3.59-5.43q-7.12-10.94-13.51-22.73t-11.91-24.6a189.8,189.8,0,0,1-9.58-27.36Z" transform="translate(-144.18 -253.12)"/>
3</svg>

CSS
1.path{
2	stroke:black;
3	fill:transparent;
4	stroke-width:5;
5	stroke-dasharray: 5000;
6	stroke-dashoffset:5000;
7	animation: DASH 3.4s ease-in-out alternate forwards;
8	-webkit-animation:DASH 3.4s ease-in-out 0s forwards;
9	animation:DASH 3.4s ease-in-out 0s forwards;
10}
11
12@keyframes DASH{
13	0%{
14	stroke-dashoffset:5000;
15	fill:transparent;
16	}
17	100%{stroke-dashoffset:0;
18	fill:black;
19	}
20}
21@-moz-keyframes DASH{
22	0%{stroke-dashoffset:5000;}
23	100%{stroke-dashoffset:0;}
24}
25@-webkit-keyframes DASH{
26	0%{stroke-dashoffset:5000;}
27	100%{stroke-dashoffset:0;}
28}