<html>
<body>
<center>
<h1>Combine animateMotion with CSS keyframe animation</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1000" height="600" viewBox="0 -50 1100 700">
<defs>
<animateMotion
xlink:href = "#illustration"
begin = "startbutton.click"
dur = "3600ms"
repeatCount = "1"
fill = "freeze">
<mpath xlink:href="#fontpath"/>
</animateMotion>
<symbol id="hl" class="wl">
<rect x="0" y="55" width="1000" height="1"></rect>
</symbol>
</defs>
<!-- Background -->
<rect x="0" y="0" width="1000" height="600" rx="20" ry="20" fill="#013220" stroke="orange" stroke-width="2"></rect>
<!-- writing lines -->
<use xlink:href="#hl" />
<use y="55" xlink:href="#hl" />
<use y="110" xlink:href="#hl" />
<use y="190" xlink:href="#hl" />
<use y="245" xlink:href="#hl" />
<use y="300" xlink:href="#hl" />
<use y="380" xlink:href="#hl" />
<use y="435" xlink:href="#hl" />
<use y="490" xlink:href="#hl" />
<!-- Animation path -->
<path id="fontpath" d="m 0 0 c 0 0 25.833 -21.854 33 -6.59 c 2.244 4.778 -43.583 107.903 -43.583 107.903 s 20.416 -48.943 27.583 -51.667 c 5.042 -1.916 42.333 2.175 53 -3.079 s 31.667 -58.746 31.667 -58.746 s -49.991 106.985 -38.334 113.492 c 14.228 7.941 77.913 -39.622 64.667 -50.334 c -8.667 -7.009 -17.608 4.216 -21 8.334 c -1.747 2.121 -21.333 44.027 2.667 42.014 s 91.817 -93.427 96.306 -103.723 c 4.669 -10.712 1.947 -11.996 -0.639 -12.291 c -11.721 -1.335 -37.539 40.442 -53 103.333 c -3.426 13.935 6.667 17.333 15.333 9.333 s 76.855 -91.35 79 -100.226 c 2.393 -9.902 -7.731 -15.378 -17 0.226 c -11.271 18.976 -36.465 82.571 -36 92.667 c 0.263 5.689 2.403 18.828 15.333 6.667 c 19.894 -18.71 42.666 -47.667 42.666 -47.667 s -21.522 22.389 -22 45 c -0.245 11.592 16.631 5.965 23.274 0.667 c 5.081 -4.052 17.727 -21.334 15.06 -36.667 s -13.334 -10.001 -16.667 1.333 s 5 10 17 8 s 17 -13.666 17 -14.333" fill="none" stroke="none"/>
<path id="fontshape" d="m 250 252 c 0 0 25.833 -21.854 33 -6.59 c 2.244 4.778 -43.583 107.903 -43.583 107.903 s 20.416 -48.943 27.583 -51.667 c 5.042 -1.916 42.333 2.175 53 -3.079 s 31.667 -58.746 31.667 -58.746 s -49.991 106.985 -38.334 113.492 c 14.228 7.941 77.913 -39.622 64.667 -50.334 c -8.667 -7.009 -17.608 4.216 -21 8.334 c -1.747 2.121 -21.333 44.027 2.667 42.014 s 91.817 -93.427 96.306 -103.723 c 4.669 -10.712 1.947 -11.996 -0.639 -12.291 c -11.721 -1.335 -37.539 40.442 -53 103.333 c -3.426 13.935 6.667 17.333 15.333 9.333 s 76.855 -91.35 79 -100.226 c 2.393 -9.902 -7.731 -15.378 -17 0.226 c -11.271 18.976 -36.465 82.571 -36 92.667 c 0.263 5.689 2.403 18.828 15.333 6.667 c 19.894 -18.71 42.666 -47.667 42.666 -47.667 s -21.522 22.389 -22 45 c -0.245 11.592 16.631 5.965 23.274 0.667 c 5.081 -4.052 17.727 -21.334 15.06 -36.667 s -13.334 -10.001 -16.667 1.333 s 5 10 17 8 s 17 -13.666 17 -14.333" fill="none" stroke="none" />
<!-- Button Start/Restart -->
<g id="startbutton" onclick="clickme()">
<rect id="btnStart" ry="5" rx="5" stroke-width="2" stroke="orange" fill="#024b30" height="40" width="215" y="7" x="770" />
<text id="starttext" x="800" y="34" font-family="Arial" fill="orange" font-size="1.8em" font-style="italic" font-weight="lighter">start writing...</text>
</g>
<!-- Pen in a circle with tip in the middle of the circle -->
<g id="illustration" transform="translate(-205,374) rotate(-55)">
<path id="st6" d="M539,309.152c0,1.021-0.827,1.848-1.848,1.848h-15.305c-1.021,0-1.848-0.827-1.848-1.848v-14.305c0-1.021,0.827-1.848,1.848-1.848h15.305c1.021,0,1.848,0.827,1.848,1.848V309.152z" fill="#ffaaaa"/>
<rect x="381" y="305" id="st2" width="139" height="6" fill="#ffd42a"/>
<rect x="381" y="299" id="st4" width="139" height="6" fill="#ffdd55"/>
<rect x="381" y="293" id="st3" width="139" height="6" fill="#ffe680"/>
<rect x="519" y="293" id="st0" width="7" height="18" fill="#999"/>
<polygon id="st5" points="361.445,302.104 381,293 381,311.252" fill="#cc9"/>
<polygon id="st1" points="361.481,302.104 368,299.084 368,305.168" fill="#FFF"/>
<path id="st5" d="M381,299.084c0,0,2.848-1.362,2.848-3.042S381,293,381,293V299.084z" fill="#cc9"/>
<path id="st5" d="M381,305.168c0,0,2.848-1.362,2.848-3.042S381,299.084,381,299.084V305.168z" fill="#cc9"/>
<path id="st5" d="M381,311.252c0,0,2.848-1.362,2.848-3.042S381,305.168,381,305.168V311.252z" fill="#cc9"/>
</g>
</svg>
</center>
</body>
</html>
body{
background-color: #013220;
}
h1{
color: orange;
font-family: sans-serif;
font-weight: 100;
padding: 0;
}
#startbutton:hover{
cursor: pointer;
}
#startbutton:hover > #btnStart{
fill: #037d50;
stroke-width: 4;
}
.wl{
fill: none;
stroke: orange;
stroke-width: 1;
}
/* begin of the keyframe animation for text object with stroke-dashoffset-attribute */
.animatedfont {
fill:none;
stroke:#fff;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:100;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
-webkit-animation: dash 4.9s linear forwards;
-o-animation: dash 4.9s linear forwards;
-moz-animation: dash 4.9s linear forwards;
animation: dash 4.9s linear forwards;
-webkit-animation-play-state: running;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
/* end of the keyframe animation for text object with stroke-dashoffset-attribute */
/* Script to start line animation with CSS */
function clickme(evt) {
var element = document.getElementById("fontshape");
element.classList.add("animatedfont");
}
Also see: Tab Triggers