Manipulate mid-points of SVG path after animation -

Manipulate mid-points of SVG path after animation -

i've got svg path animates drawing out word. after animation finished, letters should begin drip downward though text had been written in paint. solution i've come gif.

is possible manipulate path of svg after drawn create 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>

you can render svg canvas (at runtime) , pixel manipulation.

drawing svg file on html5 canvas

an alternative approach include "dripping paint" graphic elements in svg hidden initially, revealed changing opacity, or animating drip shapes.

svg