Animate your SVG with CSS using hover effects that originate from the center of the SVG

I successfully implemented this animation using GSAP and you can view the Codepen for reference:

https://codepen.io/whitelionx/full/vYGQqBZ

const svgs = document.querySelectorAll("svg");

svgs.forEach((svg) => {
  const tl = gsap
    .timeline({
      defaults: { ease: "power1.in" },
      paused: true
    })
    .to(svg.children[0], { drawSVG: "50% 50%" })
    .from(svg.children[1], { drawSVG: "0% 0%" }, 0);

  svg.addEventListener("mouseenter", () => tl.play());
  svg.addEventListener("mouseleave", () => tl.reverse());
});

However, I am now looking to achieve the same effect using only CSS. To demonstrate this, I have created a code sandbox:

https://codesandbox.io/s/xenodochial-benz-17lss?file=/src/styles.css

cssanimationsvghover

Answer №1

I made changes to make the stroke-dasharray animate instead.

body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}

svg {
    width: 50px;
    height: 50px;
    margin: 25px;
}

.circle {
    stroke-dasharray: 28.3,0,28.3;
    transform-origin: 50% 50%;
    transform: rotate(180deg);
    transition: stroke-dasharray 0.5s linear;
}

.line {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 0.5s linear;
}

svg:hover .circle {
    stroke-dasharray: 0,56.0;
}

svg:hover .line {
    stroke-dashoffset: 0;
}
<svg
  version="1.1"
  shape-rendering="auto"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 20 20"
  xml:space="preserve">
 <path class="circle" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,1c5,0,9,4,9,9s-4,9-9,9S5,1,10,1z"/>
 <path class="line" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,0v20"/>
</svg>

Answer №2

After trying it out, I have a much clearer understanding of css animations now thanks to your input as well :D thinking outside the box

body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}

svg {
    width: 50px;
    height: 50px;
    margin: 25px;
    cursor: pointer;
}

.circle {
    stroke-dasharray: 56.6;
    stroke-dashoffset: 0;
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.3s linear, transform 0.3s linear;
}

.line {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 0.3s linear;
}

svg:hover .circle {
    stroke-dashoffset: 56.6;
    transform: rotate(180deg);
}

svg:hover .line {
    stroke-dashoffset: 0;
}
    <svg
                version="1.1"
                shape-rendering="auto"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 20 20"
                enable-background="new 0 0 20 20"
                xml:space="preserve"
            >
                <path
                    class="circle"
                    fill="none"
                    stroke="#FFFFFF"
                    stroke-miterlimit="10"
                    d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1z"
                ></path>
                <path
                    class="line"
                    fill="none"
                    stroke="#FFFFFF"
                    stroke-miterlimit="10"
                    d="M10,0v20"
                ></path>
            </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

CSS or Coding? Learn how to display items side by side instead of on top of each other

Hey there! I manage a music website that is currently in beta. I'm running into an issue with the way the music results are appearing in the bottom player - they're all stacked on top of each other instead of being listed side by side. I've ...

htmlcss

Lists within lists and the use of percentages

There is a common belief that separating design and functionality is beneficial. Let's focus on the separation between HTML and CSS, specifically when organizing a menu hierarchy. The issue with nested <ol>, <ul>, and <li> elements ...

htmlcsscss-position

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

phphtmlcsswordpress

Scroll Bar Menu (User-Controlled)

I'm looking for any libraries out there that can replicate or provide a similar horizontal scrolling menu to that of espn.com's homepage. I'm relatively new to jquery and feeling a bit lost on where to begin. I did some searching on Google, ...

javascriptjquerycss

How can I extract particular combinations from a PHP array?

I have a unique question that is quite specific and despite searching online, I couldn't find an answer. So, I decided to seek advice here. Imagine my webpage has three sliders: one for selecting color options for a square, another for a circle, and ...

javascriptphphtmlcss

Issue with the dimensions and proportions of the canvas

After creating a canvas with HTML and setting the ratio to 16/9 in the CSS, I specified a width of 100vw and added a border. However, I noticed that the canvas appeared larger than expected on the screen. #canvas{ width: 100vw; aspect-ratio: 16/9; border: ...

css

Tips for customizing the appearance of an HTML5 progress bar using JQuery

Here is my method for obtaining the bar: let bar = $('#progressbar'); Styling and animating it is no problem, using either of these methods: bar.css(...) bar.animate(...) However, I am wondering how to adjust the CSS specifically for the prog ...

jquerycsshtmlanimationstyles

"Implementing CSS inline styles for improved appearance on a Safari browser when visiting

Having some trouble using CSS to create rounded corners on my Facebook fan page. Everything works fine except for Safari browser. I've tried inline styles and a separate stylesheet, but no luck. Any help would be appreciated. My CSS for rounded corne ...

htmlcssfacebook-page

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

Help with guiding and redirecting links

Here's the code snippet: <script> if(document.location.href.indexOf('https://thedomain.com/collections/all?sort_by=best-selling') > -1) { document.location.href = 'https://thedomain.com/pages/bestsellers'; } </script& ...

javascriptcssif-statementshopifyhttp-redirect

Tips for resizing the width automatically within a container?

I am facing an issue with a container that contains 3 DIVS: left sidebar, main content, and a right sidebar. I have made the main content responsive by setting the width to width:calc(100% - 400px); (where 400px is the combined width of the sidebars). Howe ...

htmlcss

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

css

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...

htmlcssiphoneresponsive-designmedia-queries

What is the functionality of `first-child` when used with custom variants in Tailwind CSS?

I've been wrestling with understanding the first-child pseudo selector and after studying through this interactive example, I'm feeling quite bewildered. <div class="[&:first-child]:text-red-500"> <ul> <li>ab ...

csstailwind-css

Using an npm package to include CSS styles in a stylesheet

I created an NPM package that includes a CSS file that needs to be included in my main CSS file. In a typical HTML CSS website, I would need to write @import url("./node_modules/web-creative-fonts/index.css") but what I really want is to simplify ...

cssnpmnpm-package

The segmented button's dropdown menu in Bootstrap is malfunctioning on Firefox version 27.0.1

I'm attempting to create a basic search bar using Bootstrap's segmented button feature (check out an example at http://getbootstrap.com/components/#input-groups-buttons-segmented). This is the code I have so far, and it's accessible on jsfi ...

jqueryhtmlcsstwitter-bootstrap

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...

cssreactjsmaterial-ui

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

Utilize the ::before selector to insert white spaces

I attempted this solution, but unfortunately it did not produce the desired outcome: .stackoverflow::before { font-family: 'FontAwesome'; content: "\f16c "; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-aw ...

csscss-selectors