Skip to content

Instantly share code, notes, and snippets.

@mkk360

mkk360/half-circle-svg-animation-hover.html

Last active January 10, 2022 08:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mkk360/2b9cb435c6b83307b40c8218f0ad453e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mkk360/2b9cb435c6b83307b40c8218f0ad453e to your computer and use it in GitHub Desktop.
Download ZIP
half-circle-svg-animation-hover.html
Raw
half-circle-svg-animation-hover.html
<div class="menu-trigger" data-component="menu-trigger">
<svg viewBox="0 0 50 50" width="50" height="50" class="menu-trigger__shape">
<circle r="25" cx="25" cy="25"></circle>
</svg>
<span class="menu-trigger__bar"></span>
<span class="menu-trigger__bar"></span>
<span class="menu-trigger__bar"></span>
</div>
<style>
.menu-trigger {
position: relative;
z-index: 999;
overflow: hidden;
width: 50px;
height: 50px;
margin: 0 1rem;
background-color: rgba(46, 91, 220, 0.2);
border-radius: 50%;
cursor: pointer;
}
.menu-trigger__bar {
position: absolute;
left: 50%;
display: block;
overflow: hidden;
width: 45%;
height: 0.3rem;
background: #2e5bdc;
transform: translate(-50%, -50%);
transform-origin: center center;
transition: top 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
}
.menu-trigger__bar:nth-child(2) {
top: 35%;
}
.menu-trigger__bar:nth-child(3) {
top: 50%;
}
.menu-trigger__bar:nth-child(4) {
top: 64%;
}
.menu-trigger__shape {
position: absolute;
top: 0;
left: 0;
fill: transparent;
stroke: #2e5bdc;
stroke-width: 4px;
stroke-dasharray: 160px;
stroke-dashoffset: 160px;
transition: stroke-dashoffset 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.is-open .menu-trigger__shape, .menu-trigger:hover .menu-trigger__shape {
stroke-dashoffset: 0;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment