HTML
<div class="menu-icon-svg">
<svg width="1000px" height="1000px">
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
<path class="path2" d="M 300 500 L 700 500"></path>
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
</svg>
<button class="menu-icon-trigger"></button>
</div>
SCSS
// Example 10
// =============================================
@function stripUnits($number) {
@return $number / ($number * 0 + 1);
}
@function px($value, $context: 16px, $root: 10px){
$result: ();
@each $item in $value {
$converted: $item;
@if $item != auto {
$unit: unit($item);
@if $unit == '' {
$converted: px($context) * $item;
} @elseif $unit == '%' {
$converted: px($context) * $item / 100%;
} @elseif $unit == 'em' {
$converted: px($context) * stripUnits($item);
} @elseif $unit == 'rem' {
$converted: $root * stripUnits($item);
}
$converted: round($converted);
}
$result: if(type-of($value) == 'list', append($result, $converted), $converted);
}
@return $result;
}
.menu-icon-svg{
display: inline-block;
width: $menu-icon-size;
height: $menu-icon-size;
position: relative;
.menu-icon-trigger{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
background-color: transparent;
border: 0;
padding: 0;
outline: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
cursor: pointer;
}
svg{
$menu-icon-svg-scale: stripUnits(px($menu-icon-dash-width, $menu-icon-size)/273px);
$menu-icon-svg-offset: (($menu-icon-svg-scale * 1000px) - px($menu-icon-size)) / -2;
position: absolute;
left: 0;
top: 0;
transform: translate($menu-icon-svg-offset, $menu-icon-svg-offset) scale($menu-icon-svg-scale);
transform-origin: 0 0;
path {
stroke: $menu-icon-dash-color;
stroke-width: round(19px * px($menu-icon-dash-height, $menu-icon-size) / 3px);
stroke-linecap: if(stripUnits($menu-icon-dash-border-radius) > 0, round, square);
stroke-linejoin: round;
fill: transparent;
transition: stroke-dasharray 0.5s;
&.path1 {
stroke-dashoffset: 5803.15px;
stroke-dasharray: 2901.57px, 2981.57px, 240px;
}
&.path2 {
stroke-dashoffset: 800px;
stroke-dasharray: 400px, 480px, 240px;
}
&.path3 {
stroke-dashoffset: 6993.11px;
stroke-dasharray: 3496.56px, 3576.56px, 240px;
}
}
}
&.is-open{
svg {
path {
&.path1 {
stroke-dasharray: 2901.57px, 5258.15px, 240px;
}
&.path2 {
stroke-dasharray: 400px, 600px, 0px;
}
&.path3 {
stroke-dasharray: 3496.56px, 6448.11px, 240px;
}
}
}
}
}
// Common styles
// ====================================
html{
font-size: 10px;
}
body{
background-color: #252e33;
padding: 3rem;
text-align: center;
}
.menu-icon, .menu-icon-svg{
margin: 3rem;
vertical-align: middle;
}
*,
*:before,
*:after{
box-sizing: border-box;
}
