Animate calligraphy using image-file instead of SVG

Question

I am creating animated calligraphy using the stroke-dashoffset technique, applying the stroke as an animated mask on top of an SVG. This works on most browsers, but I would like to apply the same mask on top of a PNG instead. That way, even if the browser has trouble with both SVG and mask (IE...), at least it will just display the PNG as-is.

Here is a codepen of the working calligraphy with pure SVG: https://codepen.io/benviatte/pen/PMzmYB

Here is the codepen of the non-working calligraphy where I put an image instead of the base SVG. It just displays blank, unless I remove the "mask-image" property, in which case it doesn't animate: https://codepen.io/benviatte/pen/eqzWzJ

Finally, here is the code of the PNG version that just displays blank: HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
  <mask id="mask" maskUnits="userSpaceOnUse">
    <path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
  </mask>
</svg>

<img src="http://thehermitcrab.org/imgs/S2.png"/>

CSS:

mask path {
    fill: none;
    stroke: white;
    stroke-width: 22;
    stroke-dasharray: 237 237;
    stroke-dashoffset: 237;
    animation: brush 1s cubic-bezier(.6,.3,.3,.9);
    animation-fill-mode: forwards;
}
@keyframes brush {
      0% { stroke-dashoffset: 237; }
     20% { stroke-dashoffset: 237; }
     80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

img, svg{
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
}

img {
    -webkit-mask-image: url(#mask);
    mask-image: url(#mask);
}

Thank you so much!!!

I'm not trying to edit the mask. I'm just trying to edit what's behind the mask, the original picture. To make it PNG instead of SVG — Ben Viatte, Jul 25 '19 at 08:16
the mask path selector suggests you are trying to access the internal contents of the mask. — Robert Longson, Jul 25 '19 at 08:31

score 1 · Answer 1 · answered Jul 25 '19 at 07:15

You can fill the masked path with an image like so: I hope this is what you were asking.

mask path {
    fill: none;
    stroke: white;
    stroke-width: 22;
    stroke-dasharray: 237 237;
    stroke-dashoffset: 237;
    animation: brush 5s cubic-bezier(.6,.3,.3,.9);
 animation-fill-mode: forwards;
}
@keyframes brush {
      0% { stroke-dashoffset: 237; }
     20% { stroke-dashoffset: 237; }
     80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

svg {
 width: 300px;
 height: 300px;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<defs>  
  <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
  <mask id="mask" maskUnits="userSpaceOnUse">
    <path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
  </mask>
</defs>
  <path mask="url(#mask)" fill="url(#img)" d="m 84.347106,72.730822 c -6.700057,0.41349 -13.536192,0.895 -20.004337,2.74122 -8.269143,3.35101 -15.144649,10.28592 -18.335113,18.62393 -1.745059,4.7139 -2.424554,9.829858 -1.055133,14.737138 0.971246,7.85177 6.591277,14.03623 12.594733,18.68723 4.899213,3.10976 10.516595,4.80935 15.88174,6.85728 3.598383,2.16843 7.853428,4.63947 9.276845,8.8059 0.995595,7.43174 -3.283258,14.41911 -7.577125,20.14167 -2.859338,3.25041 -7.082956,5.7682 -11.428016,6.06759 -2.76877,-0.88985 -4.676886,-3.50515 -6.467732,-5.66664 -0.8438,-2.84582 -0.503218,-6.25249 -2.88424,-8.50648 -2.356943,-2.51972 -6.848373,-3.89583 -9.901785,-1.90687 -1.783614,1.60567 -1.978665,4.29248 -0.431156,6.14634 0.628015,2.58248 4.330039,1.06794 4.996601,3.36938 -0.140661,3.29536 -3.415289,5.93264 -3.011822,9.2671 1.471965,3.46591 3.011956,7.79888 7.009623,8.93583 2.779476,2.56577 6.811098,1.17952 10.184223,1.15628 7.753544,-0.82418 15.439311,-4.27064 20.776362,-10.01337 3.918376,-5.23506 6.686713,-11.29125 9.19183,-17.29292 0.679648,-4.33031 0.214675,-8.76706 0.319579,-13.12674 -4.685098,-7.44203 -12.013326,-12.8652 -20.16128,-15.99596 -4.833407,-2.57162 -11.582728,-2.85294 -14.441374,-8.15604 -4.638062,-7.39166 -5.929022,-17.810038 -0.40541,-25.114328 3.085422,-4.36163 7.883758,-8.71782 13.633176,-8.01843 4.028691,-0.21996 8.250498,0.0932 11.561718,2.63603 2.904262,1.44386 1.746882,5.41774 0.879004,7.79388 -2.021102,4.66617 -3.832398,9.978878 -2.737189,15.088588 0.62468,1.45971 1.572558,3.02113 2.790336,3.97665 2.563411,1.00256 5.41245,0.65028 7.526616,-1.1464 2.393394,-1.33047 7.187979,-2.70727 6.367699,-6.21466 -1.29931,-1.67133 -4.660058,0.16306 -5.006198,-2.59652 -0.718456,-6.014858 3.485958,-11.212508 3.846428,-17.152098 0.2919,-3.79706 1.28679,-8.45196 -1.339374,-11.64839 -3.199638,-2.55035 -7.777181,-2.43209 -11.649229,-2.47619 z" />
</svg>

That's super groovy! However, what I was looking for was to get rid of the base-SVG altogether. The only SVG left will be the one that defines the mask. The base text would then be purely PNG and maximum brower-compatible — Ben Viatte, Jul 25 '19 at 07:42

Animate calligraphy using image-file instead of SVG

1 Answers1

Linked