I've got an SVG path which animates drawing out a word. After the animation is finished, the letters should begin to drip downward as though the text had been written in paint. The only solution I've come up with is to do it as a gif.
Is it possible to manipulate the path of the SVG after its drawn to create the effect?
<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-510.061 200.082 424.13 251.322" style="enable-background:new -510.061 200.082 424.13 251.322;" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<path class="path" fill="#FFFFFF" stroke="url(#g)" stroke-width="14" stroke-miterlimit="4" d="M-452.825,292.283
c-38.797-6.45-55.673,31.665-54.141,39.691c0.623,3.262,1.864,2.683,6.84,2.886c3.018,0.123,12.397-2.326,16.621-5.22
c9.716-6.655,13.538-11.867,13.538-11.867c1.06-1.231,2.76-1.456,4.78-1.316c1.963,0.136,15.194,26.35,15.847,27.428
c12.207,20.147,9.337,62.703,8.847,65.677c-3.361,20.419-33.532,55.715-42.439,29.547c-26.299-77.26,38.171-82.38,44.621-80.93
c13.822,3.106,12.376-10.28,11.743-13.3c-1.432-6.83-2.462-9.788-4.061-13.002c-4.008-8.06-8.904-16.999-8.176-17.467
c0.609-0.391-1.198,9.376,3.546,8.939c5.93-0.547,2.76-11.961,10.312-17.145c8.707-5.976,12.009-7.347,11.635-6.931
c-4.204,4.679-18.594,13.802-19.442,18.848c-1.09,6.479-1.73,27.306,13.344,32.355c6.558,2.197,35.442-58.24,37.348-68.115
c1.724-8.93-0.305-10.748-0.858-11.172c-2.443-1.871-6.648,0.054-7.167,0.292c-7.02,3.215-10.192,8.651-10.74,10.289
c-2.197,6.558-3.699,15.481,1.89,18.896c5.971,3.649,9.229,4.618,15.819-9.204c2.064-4.329,4.088-11.676,4.114-13.368
c0.07-4.595,1.431-4.653,2.944-0.539c8.273,22.494,16.686,19.444,30.462,34.976c5.15,5.807,21.282,23.499,31.24,63.769
c0.928,3.752-6.903,6.553-8.139,2.891c-8.315-24.633-10.271-34.758-15.895-50.381c-15.16-42.111-1.753-13.414-28.475-71.059
c1.661-1.142,6.421-3.193,11.871-4.381c5.702-1.242,14.565-1.38,15.939,5.132c1.989,9.427-12.222,18.347-15.609,28.852
c-6.35,19.69,0.48,32.902,5.927,29.905c34.808-19.149,27.865-13.051,31.663-20.621c1.556-3.102,0.943-9.097,0.931-12.031
c-0.061-14.49-19.911-58.049-21.116-57.597c-1.317,0.494,21.932,65.597,25.712,64.607c2.049-0.537-9.917-16.161-6.63-26.456
c0.884-2.767,1.444-7.339,8.422-7.099c19.793,0.683,20.382,29.092,24.906,34.772c2.265,2.843,9.185-24.448-3.663-60.94
c16.114,37.598,13.059,48.655,12.918,47.193c-3.072-31.917,1.788-49.326,20.006-50.841c9.18-0.764,16.58-1.225,16.58-1.225
s-35.881,3.339-36.249,17.898c-0.16,6.348,6.265,16.546,12.222,17.616c13.478,2.42,31.955-14.112,39.648-39.058
c2.094-6.789,22.84-20.669,23.074-20.388c0.415,0.498-49.858,35.959,7.977,20.739c32.55-8.566,25.661,19.843-8.652,30.146
c-29.735,8.929-31.283,17.326-71.967,30.749c-70.138,23.141-90.571,28.35-126.316,46.254c-40.064,20.067-60.502,35.66-60.502,35.66
s228.985-125.861,373.43-146.017"/>
<linearGradient id="g">
<stop offset="0.10" stop-color="#0ef1ff"/>
<stop offset="0.15" stop-color="#37c8ff"/>
<stop offset="0.20" stop-color="#58a7ff"/>
<stop offset="0.25" stop-color="#7a85ff"/>
<stop offset="0.30" stop-color="#ac53ff"/>
<stop offset="0.35" stop-color="#d22dff"/>
<stop offset="0.40" stop-color="#f20dff"/>
<stop offset="0.45" stop-color="#fe4cb8"/>
<stop offset="0.50" stop-color="#fe7394"/>
<stop offset="0.55" stop-color="#fd9376"/>
<stop offset="0.60" stop-color="#fdb05b"/>
<stop offset="0.65" stop-color="#fccf3e"/>
<stop offset="0.70" stop-color="#faec21"/>
<stop offset="0.75" stop-color="#d4c81c"/>
<stop offset="0.80" stop-color="#a49b15"/>
<stop offset="0.85" stop-color="#7d7610"/>
<stop offset="0.90" stop-color="#57520b"/>
<stop offset="0.95" stop-color="#353207"/>
<stop offset="1" stop-color="#000000"/>
</linearGradient>
</svg>
