.squiggle {
stroke-dasharray: 321.8287353515625;
animation: draw 2s linear forwards;
}
.arrow {
offset-distance: 100%;
offset-path: path(" M122.500000,13.500000 L122.5,18 C123.014587,32.499962 123.006859,47.000008 122.990685,61.499989 L123,67.000000 C118.825745,67.000000 115.151115,67.000000 111.000000,67.000000 C111.000000,72.154762 111.000000,76.845238 111.000000,82.067970 L100.5, 82 C100.500000,64.833336 100.500000,48.166668 100.500000,31.250000 C95.500000,31.250000 90.500000,31.250000 85.000000,31.250000 C85.000000,44.495728 85.000000,57.504272 85.000000,71.5 L72.500000,71.500038 L72.500000,56.250000 C66.166664,56.250000 59.833332,56.250000 53.000000,56.250000 C53.000000,69.495728 53.000000,82.504272 53.000000,95.755150 L15.500000,95.7500000 ");
animation: direction 2s linear forwards;
}
#container:hover .squiggle {
stroke-dasharray: 321.8287353515625;
animation: copy_draw 2s linear forwards;
}
#container:hover .arrow {
offset-distance: 100%;
offset-path: path(" M122.500000,13.500000 L122.5,18 C123.014587,32.499962 123.006859,47.000008 122.990685,61.499989 L123,67.000000 C118.825745,67.000000 115.151115,67.000000 111.000000,67.000000 C111.000000,72.154762 111.000000,76.845238 111.000000,82.067970 L100.5, 82 C100.500000,64.833336 100.500000,48.166668 100.500000,31.250000 C95.500000,31.250000 90.500000,31.250000 85.000000,31.250000 C85.000000,44.495728 85.000000,57.504272 85.000000,71.5 L72.500000,71.500038 L72.500000,56.250000 C66.166664,56.250000 59.833332,56.250000 53.000000,56.250000 C53.000000,69.495728 53.000000,82.504272 53.000000,95.755150 L15.500000,95.7500000 ");
animation: copy_direction 2s linear forwards;
}
@keyframes draw {
from {
stroke-dashoffset: -321.8287353515625
}
to {
stroke-dashoffset: 0;
}
}
@keyframes copy_draw {
from {
stroke-dashoffset: -321.8287353515625
}
to {
stroke-dashoffset: 0;
}
}
@keyframes direction {
to {
offset-distance: 0%;
}
}
@keyframes copy_direction {
to {
offset-distance: 0%;
}
}