I have the following section of an SVG file (it's basically a hyphen character drawn out).
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
I want to animate a sort of eye blink on that part of the SVG file so that the shape ends up looking like this.
<path fill="#000000" d="m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z" fill-rule="nonzero"></path>
I can't figure out how to do this with CSS only. One "blink" is the first step. Of course, the next step is to time a few different blinks so that it looks natural. Here's the entire SVG shape -- I'd be "blinking" the left and right eyes at the same time. I wish I could provide more detail here, but I'm a novice.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
</g>
</svg>
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
Now I don't know if this is possible, but I'd like to iterate each blink at somewhat random intervals. Or at the very least, something like this:
blink.........blink.blink..............blink......blink.
I don't know how to loop these animations, but I'm learning a lot here tonight. :)
Here's an answer using SMIL, I've just pasted the d values into the animate element's values attribute. I've used keyTimes so that there's a pause between winks.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" keyTimes="0 ; 0.1 ; 0.2 ; 1" />
</path>
</g>
</svg>