Creating a realistic eye blink animation using only CSS on an SVG element

Below is a segment from an SVG file featuring a hyphen character.

<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 am looking to create an animation resembling an eye blink on this part of the SVG, resulting in the shape shown below.

<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>

Using only CSS, I have been unsuccessful in achieving the desired effect. I want to start by creating one "blink," and then progress to timing multiple blinks for a natural appearance. The entire SVG shape will involve "blinking" the left and right eyes simultaneously. Unfortunately, as a novice, I lack further detail to provide at this time.

        <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)">
           ... (omitted for brevity)
            <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>

After experimenting more with SMIL, here is an updated snippet:

<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">
       ... (omitted for brevity) 
           
            <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">

I am uncertain if it’s feasible, but ideally, I'd like each eye blink to occur randomly at timed intervals. Alternatively, I aim for a sequence similar to this pattern:

blink.........blink.blink..............blink......blink.

While I am unsure how to execute these looping animations currently, my learning journey tonight has been enlightening! :)

htmlcsssvg

Answer №1

Here is an answer that utilizes SMIL technology, where the d values are directly inserted into the animate element's values attribute. KeyTimes are also used to create 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...
                .
                .
                .
   
            </g>
        </svg>

Answer №2

.st0{fill:#232323;}
.st1{fill:#FFFFFF;}

@keyframes open {
0% { ry: 61.7; }
95% { ry: 61.7; }
100% { ry: 0; }
}
.left-eye, .right-eye {
animation-name: open;
animation-duration: 2s;
animation-iteration-count: infinite;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 752.9 752.9" style="enable-background:new 0 0 752.9 752.9;" xml:space="preserve">
<g id="circle" transform="translate(-17.5 -17.5) scale(0.3431372549019608)">
<g>
<circle vector-effect="non-scaling-stroke" class="st0" cx="1148.1" cy="1148.1" r="1097.1"/>
</g>
</g>
<g id="icon" transform="translate(-16.325252525252523 -16.361616161616162) scale(0.3232323232323232)">
<g>
<ellipse class="st1 left-eye" cx="998.4" cy="1304.6" rx="41.1" ry="61.7"/>
<ellipse class="st1 right-eye" cx="1409.8" cy="1304.6" rx="41.1" ry="61.7"/>
<path class="st1" d="M1368.7,1510.3h-329.1c-11.4,0-20.6,9.2-20.6,20.6c0,11.4,9.2,20.6,20.6,20.6h329.1
c-Unique Text-
c-Unique Text-z M1533.2,810.9c-34.1,0-61.7-27.6-61.7-61.7V593.1l217.8,217.8H1533.2z
 M1656.7,1839.5H751.5c-34.1,0-61.7-27.6-61.7-61.7v-1152c0-34.1,27.6-61.7,61.7-Unique-cile Vector-ex Effect="..."ry Action Count incredible...
</g>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to determine if a PHP string has identical consecutive letters?

Can you help me figure out why my code isn't working? $pattern_c_sap='/\.\-/'; $local='.................'; $local_array = explode( '', $local ); for($i=0; $i<=$local_length; $i++){ if(preg_match($pattern_c_ ...

phphtmlregex

Is there a way to achieve horizontal alignment for the Twitter and Facebook buttons on my page?

By utilizing the html code provided, I successfully incorporated Twitter and Facebook "Like" buttons into my website. Initially, they were stacked vertically, which resulted in excessive use of vertical space. To optimize space usage, I decided to align th ...

javascripthtmltwitterfacebook-like

Is it possible to apply a margin to <details><summary> elements?

I am struggling with adding a margin to each of the children in my nested <details> elements .container { margin: 20px; } .parent, .child { outline: none; border: none; user-select: none; cursor: pointer; } <div class="container"> ...

htmlcss

Ensure that input field is validated only upon clicking the save button in Angular framework

Can anyone suggest the most efficient method to validate required fields in an input form using AngularJS? I want to display an error message only after the user clicks the save button (submit). Thank you in advance. ...

javascripthtmlangularjsvalidation

Sorry, the provided text is already unique as it is an error message

I'm currently using the react-highlight-words package to highlight text inputted into a textbox After checking out the react-highlight-words documentation, I noticed that they are using searchWords as an array. https://www.npmjs.com/package/react-high ...

javascripthtmlreactjsreduxmaterial-ui

Combination of AngularJS and jQuery

I have a page in which additional input fields are dynamically added based on the selection made in a drop-down menu. This page is powered by angularjs, but I had to use jQuery specifically for adding these extra input fields. Here is the HTML code snippe ...

javascriptjqueryhtmlangularjs

Tips for organizing CSS styles into common and unique statements

Is there a way to apply the same background style but different font styles to two elements without duplicating the style statement in the header part? ...

css

Trigger the oninput event using jQuery

I am using an oninput event on a textarea to dynamically adjust its height based on user input. However, I've encountered an issue when trying to edit the value programmatically using jQuery's val() function: it does not trigger the oninput event ...

javascripthtmljqueryeventsdom-events

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...

javascriptjqueryhtmlcssjquery-select2

What is the best strategy for managing pagination when dealing with a large number of pages?

Up until now, I have understood that pagination only links different pages together. This works fine when dealing with a limited number of pages or posts to display. However, what if I have 30 or more pages to paginate? Wouldn't it be impractical to c ...

javascriptjqueryhtmlcsspagination

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

Adding a semi-transparent layer to cover half of the canvas while still allowing the canvas to be visible

I'm struggling with overlaying a div on top of a canvas while keeping the canvas visible. Currently, I can only get the div to cover the canvas and hide it. If anyone has an example to share, that would be greatly appreciated. var canvas = document ...

csshtmlcanvashtml5-canvas

Images are not displaying properly after uploading html files

Recently, I created an HTML file that was functioning perfectly. However, when I uploaded it to a free domain host, some of the images failed to load properly. You can see the current state of the website here, and this is what it should actually look li ...

htmlcssweberror-handling

Toggle functionality not functioning correctly when clicking on two elements simultaneously

When I click on the input and the div with class "checkmark", I want the div tag with id "hidden-gift-order" to be hidden. However, clicking on the input works as expected but clicking on the div tag does not. Can someone explain why? function Toggle_Vi ...

javascripthtmlbootstrap-4

Navigating to two separate webpages concurrently in separate frames

I am working on creating a website with frames, where I want to set up a link that opens different pages in two separate frames. Essentially, when you click the link, one page (such as the home page in a .html file) will open in frame 1 on the left side, ...

javascripthtmlhrefframes

jquery deleting the parent container of a child element

I have been attempting to eliminate the parent element of the label associated with the attribute record_type. Below is the HTML content: <div id="append"> <div class="col-md-6 form-group hide_fields" style="display: block;"> <l ...

jqueryhtmlparent

Timer for searching webpages using Javascript

I am looking for a way to continuously search a specific webpage for a certain set of characters, even as the text on the page changes. I would like the program to refresh and search every minute without having to keep the webpage open. In addition, once ...

javascripthtml

Ways to manage an element that has been loaded using the load query function

After implementing the query load function to update posts on the homepage, I was able to display the most up-to-date posts. However, a new issue arose: Whenever I updated all posts without refreshing the entire page, I needed a way to control the element ...

javascriptjqueryhtmlnode.jsajax

Executing Basic Authentication in Javascript through window.open()

After a user logs into my app, they have the option to download a CSV file from the server by clicking on a button. The URL for the download is secured with basic authentication. When attempting to open the URL using the code below: window.open('http ...

javascripthtmlajaxbasic-authentication

Learn the process of sending notifications upon clicking on an advertisement by a user

I'm currently working on a system that displays ads on mobile devices. Our clients have the option to use their own custom HTML code for their advertisements. We want to be able to track when a user clicks on these ads. I am considering wrapping the u ...

javascripthtmlajaxclickads