Javascript 基于鼠标位置设置线性艺术的动画

我在illustrator中创建了一个骷髅线艺术。我正在尝试根据鼠标位置填充或擦除线条。我似乎有两种方法可以做到这一点：

使用懒线绘制器绘制线条，如我的JSFIDLE中所示- 然后找到一种基于鼠标y位置的动画拖动方法（以便在视口顶部完全绘制头骨，当鼠标位于底部时，在开始时完全绘制头骨）

设置我需要的动画并创建gif，让gif根据鼠标的y位置播放动画（当鼠标位于视口顶部时，动画最后一帧显示）

作为一个对Javascript完全陌生的人，我希望在这里有一个正确的方向

/*
*延迟线绘制器-路径对象
*使用“SVG到延迟线转换器”生成
* 
* http://lazylinepainter.info 
*版权所有2013，Cam O'Connell
*  
*/
var pathbj={
“头骨”：{
“冲程路径”：[{
“路径”：“M353.7637.83c-6.16-4.5-9.9,20.17-10.23,23.19-.48,4.32-2.89,25.95-8.77,30.88s-25,24.62-36,13.43-26.84-29.33-1.21-91.2,35.92-81.3,55.77-90.19”，
“持续时间”：600
}, {
“路径”："6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）7）7）7）7）7）7）7）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6）6.36,26.77s2-41.55-4.56-45.06-11.46-2.55-7.64,14,1.17,13.84,4.48,19.19,5-.79,5-.79-.15,15.83,7.8,18.61,10.77-1.94,14.5,8.26S237.73854.4239.7854s1.69-8.3,1.69-8.3,5,12.35,11.14,12.27-2.35,14.27-2.35,6.83,12.68,12.5,13,20.29-3.33,20.29-3.33-3.33l2-52-.21s2.1-4.71,2.84-2.28-2.35,20.28863.2835,28.2835,28，
“持续时间”：1300
}, {
“路径”：7.7.6.4.4.4.7.4.4.4.4.4.4.4.4.4.4.7-18.34-18.34-18.7-18.7-7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7.7-18.7-18.7 7.7 7 7 7 7.7 7 7.7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7.3 3.3.3 3 3.3 3.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 3.3 3.3.3.3 3 3.3.3.3.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 8.1-26,8.1-26-2.59,34.57,15.76,34.33c8.63-.11,8.32-25.38,8.32-25.38s-2.76,37,12.82,32.12c5.38-1.69,3.86-34.83,3.86-34.83s1.58,37.74,14.5,35,11-34.06,11-34.06l.38,25.4s3.24,10.75,8.07,8.53,8.93-35.2,8.93-35.2“，
“持续时间”：1000
}, {
“路径”：7.7.7.7.5.7.7.7.7.7.7.5.5.5.7 7.5.5.7 7 7.28282828282828281895.1895.1899.1899.1899.1899.1899.1895.1895.1899.1899.1899.1899 9.1899 9.1899 9 9 9 9.1899 9 9 9.9 9 9.9 9.9.9.9.9 9.9.9.9 9 9.9.9 9.9.9 9 9.9 9 9.9 9 9.9.9 9 9 9.9 9 9 9.9 9 9 9 9 9.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9-13.05-7.38-13.09-10.62-13.33-1.57-13.78-7.89-12.37-10.48-12.83-18-10.3,9.85-9.15,15。18.8-8-15-15-15-15-15-15-15-15-15.1-15.8-15-15.1-13.8-8-13.8-8-16-8-16-16-16-3.19-3-19-19-19-19-19-19-19-19-19-19-15-6-1.65-1.6-1-1.6-1-1-1.6-1-1.6-1-1.6-1.6-1.6-1-1-1.6-1-1-1-1-1.6-1.6-1-1.6-1-1-1.6-1.6-1-1-1.6-1-1-1-1-1-1.6-1-1-1-1.6-1-1.6-1-1-1-1-1-1-1.6-1-1-1.6-1-1-1.19 71,9-.66S212.92788212.92788C-1.29-15.64,18.44-33.71,10.46-25.53s-3.46,24.36-2.86,28.67,10.27,1.487.3.7 7 7.3 3.3 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 72,4“，
“持续时间”：1800
}, {
“路径”是“路径”的“路径”是：M3434.131058.131058.3.8.8.8.8.8.8.7.7.7.7.9-13.21.21-14.14.29-14.29-28.28-28.28-14.14-14.14-14-14.29-14.29-14.29-14.29-28-28.28.32-14-14.12-14.12-14-14.12-14-14.12-14.9-14.9-14-14-14.9-14.9-14.9-14-14.9-14.9-14.9-14.9-14.9-14.9-14-14-14.9-14.9-14.9-14.9-14.9-14-14-14.9-14.9-14-14.9-14.9-14.9-14.9-14-14-14.9-45,3.59353,3.59“，
“持续时间”：600
}, {
“路径”：“M137.83749.62a.2.2,0,0,0-.34.2c1.67,3.36,6.42,11.76,13.69,15.53,7,3.63,8.35,9.34,8.61,11.86a.2,0,0,0,38,0c.93-3.94,2.78-16.11-8.55-20.79C139.25751.36140.72753.16137.83749.62Z”，
“持续时间”：600
}, {
“路径”：“M29.25692.45s39,6,54.73,19.23c23.64,19.94,58.83,13,71.29,16.61s40.5,5.94,27,59c-13.57,53.48-74,9.06-82.33-9.16s-20.85-66.39-21.91-70.25”，
“持续时间”：600
}, {
“路径”：7.6.6，6.6，18.6，18.5，18.18，18.18，18.18，18.18，18.18，18.18，18.21，18.21，11.9，4.9，11.9，4.7 7 7 7 7.7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7，11.9，7 7 7 7，11，7 7 7，11，4.7，7，4.7 7，7，7，7，7，7，7 7，7，7，7，7，7，7 7，7，7，7 7，7，7，7，7，7，7，7 7，7，7，7，7，7，7，7 7 7，7，7，7，7，7，7，7，7，7，7 7，7，7，7，7，7，7，7，7，7，7，7，7，7，7，7，7，7，7 7.71,10.1,13.51,21.21-2,54.17-36.87-12.9-44.75-16.58-20.7-34.81-11.63-42.76,7.18-11.58，13.1-11.29",
“持续时间”：800
}, {
“路径”：“M117.17725.32s-7.34,2.22-8.07,8.44-6.26,16.28.43,32.11S124.1785.65126.06791S14,19.11,17.2,19.95”，
“持续时间”：600
}, {
“路径”：“M107.51723.39s-5.83.49-7.59,10.49,0,25.61,4.32,34.61,13.13,31.06,16.31,31”，
“持续时间”：600
}, {
“路径”：“M99720.59s-11.83,3.21.19,55.67”，
“持续时间”：600
}, {
“路径”：“M91.44716.92s-6.36,2.88-3.58,26”，
“持续时间”：600
}, {
“路径”：“M71.39704.2S81.85810.26141816.46194.11866194.11866”，
“持续时间”：600
}, {
“路径”：“M64.8701.53S76.34781105807.09s62.43,11.18,75.83,38c8.65,17.3,16.44,18.46,13.78,43.7”，
“持续时间”：600
}, {
“路径”：“M188.16783c-2.86,21.16-15.09,29.25-19.28,31.79a1.38,1.38,0,0,0,2.39c6.2,3.61,26.3,14,24.48,24.55”，
“持续时间”：600
}, {
“路径”：“M56.92698.88s17.15,65.93,22.35,77.65,21.78,41.8,25,66.37,11.68,79.54,12.22,86.37”，
“持续时间”：600
}, {
“路径”：“M109.89918S-7.33-104-36.65-132.14”，
“持续时间”：600
}, {
“路径”：“M103.79906.83s-6.07-74.14-25.24-99.39”，
“持续时间”：600
}, {
“路径”：“M206.21974.28”，
“持续时间”：600
}, {
“路径”：“M352.31961S4.7,90.78-24.67,93.16c-77.05,6.26-78.1-7.6-83.81-11s-5.43-2.09-14.1-4.67-54.49-46.61-54.49-46.61c-17.69-17.35-40.72-40.59-49.93-53.74-5.06-7.23,1.21-