This is my svg, the eyes blink every 12 seconds, but I want the user to be able to trigger that on any mouseover event. So restart the animation on hover.
I've tried adding begin="mouseover;...." to my svg animate tags, but it just triggers that lone animation, not all 6 animations, and I don't want it to trigger when the user hovers over a small shape, but rather over the whole svg.
I'm not keen on javascript because it slows the load time. I'd love some assistance, it'll help those impatient to view the animation again.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto; margin-top: -110px;">
<path d="M13.936 69.536s-.904.55-1.48 1.279-1.667 3.216-1.667 3.216-1.105-7.03-1.199-10.04c-.093-3.01.45-7.942.45-7.942l-8.691.6s1.9-6.464 3.147-8.991c1.245-2.527 3.596-5.994 3.596-5.994s-2.52-.16-3.896.15S0 43.612 0 43.612c2.675-9.279 6.027-16.872 10.94-22.178C18.673 13.326 34.6-.32 57.991.004s33.594 5.326 44.206 13.637c10.612 8.311 17.832 29.67 17.832 29.67l-7.942-2.098 6.743 14.685-8.99.6-.75 15.883-2.847-3.296s-.488 10.012-1.649 13.936c-1.16 3.924-4.645 9.44-4.645 9.44l-1.349-3.596s-2.494 7.072-5.095 9.59c-2.118 2.051-5.239 2.718-7.942 3.896-7.797 3.4-13.699 8.929-23.826 9.141s-27.169-6.132-33.417-11.239c-6.248-5.106-6.593-11.389-6.593-11.389l-1.199 5.245s-4.679-9.466-5.694-13.636-.9-10.939-.9-10.939z" fill="#45332c" fill-rule="evenodd"/><path d="M19.331 13.043s-3.966-3.487-4.945-5.844c-.904-2.176-.6-7.043-.6-7.043s7.166 3.172 13.17 5.076c3 .953 7.174.818 12.08 1.929 4.907 1.11 10.865 3.784 10.865 3.784L48.85 6.3l6.894 5.544 3.896-9.29 3.596 9.74 7.643-5.695-1.499 4.646s6.731-2.78 10.639-3.747c3.908-.965 8.456-.707 12.737-1.873 4.281-1.165 12.737-5.17 12.737-5.17s-.35 4.496-1.199 6.594c-.849 2.098-3.896 5.994-3.896 5.994s6.142 7.34 7.343 12.438c1.2 5.097 1.137 11.9-1.199 16.933s-6.847 9.09-11.688 11.389c-4.842 2.298-10.806 2.824-15.734 1.798-4.928-1.026-9.334-4.78-12.438-7.193s-6.444-6.593-6.444-6.593-4.605 5.051-7.942 7.492c-3.336 2.442-7.178 5.841-12.138 6.744-4.96.902-11.333.372-16.184-2.398-4.85-2.77-9.06-8.213-10.789-13.337s-.665-10.657.45-15.285 5.694-11.988 5.694-11.988z" fill="#785647" fill-rule="evenodd"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734"/>
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732"/>
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<path d="M34.232 104.03l-.344 6.305 3.284 8.9 3.391-6.781 2.12 7.629 3.92-7.735 2.119 6.04 2.86-6.146 1.167-7.312zM65.57 105.35l5.616 13.563 2.437-6.676 2.437 8.16 3.709-8.054 2.33 6.676 3.71-9.007-1.166-6.781z" fill="#f59e01" fill-rule="evenodd"/><path d="M21.064 60.248s-1.255 4.953-1.199 7.642c.056 2.69 1.649 8.242 1.649 8.242l1.648-3.896s-.085 7.66 1.086 11.09c1.172 3.427 5.058 8.091 5.058 8.091l.15-4.196s.463 3.721 1.948 5.844 7.343 5.845 7.343 5.845l-7.043 7.792 5.094.6-2.547 2.397s4.28-.363 5.994-1.349c1.715-.986 3.896-4.196 3.896-4.196s1.782 3.081 3.121 3.966c1.34.885 4.664.917 4.664.917s-.704-3.049-.442-3.234c.32-.227 2.997 1.798 2.997 1.798l-.45-2.098 11.538-.15-.45 2.847 3.783-.837-.869 2.111s4.14-.577 4.938-1.413c.797-.835 3.537-3.607 3.537-3.607s3.022 3.412 4.646 4.196c1.623.784 4.495.75 4.495.75l-2.547-2.698 6.144.45s-3.181-3.102-4.346-4.646-2.697-4.495-2.697-4.495 5.457-2.504 6.893-4.496 1.648-6.294 1.648-6.294l1.218 4.566s3.437-5.57 4.327-7.862c.89-2.293.717-3.393.899-5.245s.15-5.844.15-5.844l1.798 2.697s1.37-7.276 1.498-9.89c.128-2.615-.3-5.694-.3-5.694l-40.758 4.345z" fill="#785647" fill-rule="evenodd"/><path d="M36.563 61.997l-5.006 6.939s4.14 1.15 6.252.953c2.112-.197 6.04-2.119 6.04-2.119s-1.236 3.934-2.331 5.404c-1.096 1.47-3.921 3.285-3.921 3.285s4.698.717 6.993.212c2.296-.505 6.358-3.179 6.358-3.179l-1.59 6.888 7.63-8.795 3.062 16.27 3.19-16.482 6.463 8.795-.636-7.206s2.438 2.334 4.45 3.073 7.418.742 7.418.742l-5.26-8.59s2.796 1.16 4.795 1.35c2 .19 7.043-.6 7.043-.6l-4.645-7.193s-8.02-.125-11.913-.899c-1.947-.387-6.65-2.862-8.88-3.889s-3.15-.13-3.15-.13-6.802 3.06-10.823 4.146c-4.021 1.085-11.539 1.025-11.539 1.025z" fill="#ffe8bb" fill-rule="evenodd"/><path d="M53.047 37.768s4.706-3.805 7.343-3.746c2.637.059 6.593 3.746 6.593 3.746S63.06 66.979 60.54 66.989c-3.12.012-7.492-29.221-7.492-29.221z" fill="#f59e01" fill-rule="evenodd"/>
<animate
id = "yellowEye"
xlink:href="#yellow"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye.end+12s;"
/>
<animate
id = "yellowEye2"
xlink:href="#yellow2"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye2.end+12s;"
/>
<animate
id = "blackEye"
xlink:href="#black"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye.end+12s;"
/>
<animate
id = "blackEye2"
xlink:href="#black2"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye2.end+12s;"
/>
<animate
id = "whiteEye"
xlink:href="#white"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye.end+12s;"
/>
<animate
id = "whiteEye2"
xlink:href="#white2"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye2.end+12s;"
/>
</svg>