Для реализации идеи одновременной анимации рисования с помощью двух линий, можно использовать атрибут stroke-dasharray
.
У атрибута stroke-dasharray
имеется несколько пар параметров:
stroke-dasharray = "черта пробел черта пробел"
Остается вычислить необходимые значения этих параметров:
Длина периметра кнопки: 320 + 60 + 320 + 60 = 760
Половина длины периметра, - это будет длина одной линии - 380px
Чтобы скрыть линии на начальном этапе рисования записываем stroke-dasharray ="0 380 0 380"
Другими словами - черта - 0
, пробел - 380
, черта - 0
, пробел - 380
Итого: длина черты - 0
, длина пробела - 760
то есть линия будет полностью скрыта
Чтобы полностью показать обе сомкнутые линии: stroke-dasharray ="0 0 760 0"
Записываем формулу анимации: values="0 380 0 380; 0 0 760 0"
body {
max-width: 100vh;
margin: 0;
color: #fff;
font-size: 24px;
background: #3A92CE;
}
a, a:hover, a:focus, a:active, a:visited {
color: gold;
text-decoration: none;
font-size: 1em;
}
.hero {
height: 100vh;
width: 100vw;
}
.svg-container {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
max-height: 60px;
cursor: pointer;
}
.rect-shape {
stroke:#E4E4E4;
stroke-width:2;
fill:transparent;
}
.text {
font-family: serif;
font-size: 26px;
font-weight:bold;
line-height: 32px;
letter-spacing: 4px;
color: #E4E4E4;
top: -48px;
position: relative;
text-align: center;
}
<section class="hero">
<div class="svg-container">
<a class="magic-link" href="#">
<svg class="gradient" id="svg1" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#EB3349" />
<stop offset="95%" stop-color="#EB3349" />
</linearGradient>
</defs>
<rect class="rect-shape" id="rect1" height="60" width="320" stroke-width="2" />
<polyline id="p1" points="0 0, 320 0, 320 60, 0 60, 0 0" fill="transparent" stroke="#E4E4E4"
stroke-width="8" stroke-dashoffset="600" stroke-dasharray="0 380" >
<animate id="an1"
attributeName="stroke-dasharray"
values="0 380 0 380;0 0 760 0"
dur="1s"
begin="p1.mouseover"
fill="freeze"
restart="whenNotActive" />
<animate id="an2"
attributeName="stroke-dasharray"
values="0 0 760 0;0 380 0 380"
dur="0.5s"
begin="an1.end"
fill="freeze"
restart="whenNotActive" />
</polyline>
<div class="text">Bottom middle</div>
</svg>
</a>
</div>
</section>
Чтобы начать анимацию из другой точки, например из середины верхней линии кнопки, нужно сдвинуть начальную точку анимации с помощью команды stroke-dashoffset="220"
Top-middle
body {
max-width: 100vh;
margin: 0;
color: #fff;
font-size: 24px;
background: #4A4A4A;
}
a, a:hover, a:focus, a:active, a:visited {
color: gold;
text-decoration: none;
font-size: 1em;
}
.hero {
height: 100vh;
width: 100vw;
}
.svg-container {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
max-height: 60px;
cursor: pointer;
}
.rect-shape {
stroke:#E4E4E4;
stroke-width:2;
fill:transparent;
}
.text {
font-family: serif;
font-size: 26px;
font-weight:bold;
line-height: 32px;
letter-spacing: 4px;
color: #E4E4E4;
top: -48px;
position: relative;
text-align: center;
}
<div class="text">Top middle</div>
</svg>
</a>
</div>
</section>
<section class="hero">
<div class="svg-container">
<a class="magic-link" href="#">
<svg class="gradient" id="svg1" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#EB3349" />
<stop offset="95%" stop-color="#EB3349" />
</linearGradient>
</defs>
<rect class="rect-shape" id="rect1" height="60" width="320" stroke-width="2" />
<polyline id="p1" points="0 0, 320 0, 320 60, 0 60, 0 0" fill="transparent" stroke="#E4E4E4"
stroke-width="8" stroke-dashoffset="220" stroke-dasharray="0 380" >
<animate id="an1"
attributeName="stroke-dasharray"
values="0 380 0 380;0 0 760 0"
dur="1s"
begin="p1.mouseover"
fill="freeze"
restart="whenNotActive" />
<animate id="an2"
attributeName="stroke-dasharray"
values="0 0 760 0;0 380 0 380"
dur="0.5s"
begin="an1.end"
fill="freeze"
restart="whenNotActive" />
</polyline>
<div class="text">Top middle</div>
</svg>
</a>
</div>
</section>
Top-left
body {
max-width: 100vh;
margin: 0;
color: #fff;
font-size: 24px;
background: #4A4A4A;
}
a, a:hover, a:focus, a:active, a:visited {
color: gold;
text-decoration: none;
font-size: 1em;
}
.hero {
height: 100vh;
width: 100vw;
}
.svg-container {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
max-height: 60px;
cursor: pointer;
}
.rect-shape {
stroke:#E4E4E4;
stroke-width:2;
fill:transparent;
}
.text {
font-family: serif;
font-size: 26px;
font-weight:bold;
line-height: 32px;
letter-spacing: 4px;
color: #E4E4E4;
top: -48px;
position: relative;
text-align: center;
}
<section class="hero">
<div class="svg-container">
<a class="magic-link" href="#">
<svg class="gradient" id="svg1" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#EB3349" />
<stop offset="95%" stop-color="#EB3349" />
</linearGradient>
</defs>
<rect class="rect-shape" id="rect1" height="60" width="320" stroke-width="2" />
<polyline id="p1" points="0 0, 320 0, 320 60, 0 60, 0 0" fill="transparent" stroke="#E4E4E4"
stroke-width="8" stroke-dashoffset="380" stroke-dasharray="0 380" >
<animate id="an1"
attributeName="stroke-dasharray"
values="0 380 0 380;0 0 760 0"
dur="1s"
begin="p1.mouseover"
fill="freeze"
restart="whenNotActive" />
<animate id="an2"
attributeName="stroke-dasharray"
values="0 0 760 0;0 380 0 380"
dur="0.5s"
begin="an1.end"
fill="freeze"
restart="whenNotActive" />
</polyline>
<div class="text">Top left</div>
</svg>
</a>
</div>
</section>
Top-right
body {
max-width: 100vh;
margin: 0;
color: #fff;
font-size: 24px;
background: #3A92CE;
}
a, a:hover, a:focus, a:active, a:visited {
color: gold;
text-decoration: none;
font-size: 1em;
}
.hero {
height: 100vh;
width: 100vw;
}
.svg-container {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
max-height: 60px;
cursor: pointer;
}
.rect-shape {
stroke:#E4E4E4;
stroke-width:2;
fill:transparent;
}
.text {
font-family: serif;
font-size: 26px;
font-weight:bold;
line-height: 32px;
letter-spacing: 4px;
color: #E4E4E4;
top: -48px;
position: relative;
text-align: center;
}
<section class="hero">
<div class="svg-container">
<a class="magic-link" href="#">
<svg class="gradient" id="svg1" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#EB3349" />
<stop offset="95%" stop-color="#EB3349" />
</linearGradient>
</defs>
<rect class="rect-shape" id="rect1" height="60" width="320" stroke-width="2" />
<polyline id="p1" points="0 0, 320 0, 320 60, 0 60, 0 0" fill="transparent" stroke="#E4E4E4"
stroke-width="8" stroke-dashoffset="60" stroke-dasharray="0 380" >
<animate id="an1"
attributeName="stroke-dasharray"
values="0 380 0 380;0 0 760 0"
dur="1s"
begin="p1.mouseover"
fill="freeze"
restart="whenNotActive" />
<animate id="an2"
attributeName="stroke-dasharray"
values="0 0 760 0;0 380 0 380"
dur="0.5s"
begin="an1.end"
fill="freeze"
restart="whenNotActive" />
</polyline>
<div class="text">Top right</div>
</svg>
</a>
</div>
</section>
Bottom-left
body {
max-width: 100vh;
margin: 0;
color: #fff;
font-size: 24px;
background: purple;
}
a, a:hover, a:focus, a:active, a:visited {
color: gold;
text-decoration: none;
font-size: 1em;
}
.hero {
height: 100vh;
width: 100vw;
}
.svg-container {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
max-height: 60px;
cursor: pointer;
}
.rect-shape {
stroke:#E4E4E4;
stroke-width:2;
fill:transparent;
}
.text {
font-family: serif;
font-size: 26px;
font-weight:bold;
line-height: 32px;
letter-spacing: 4px;
color: #E4E4E4;
top: -48px;
position: relative;
text-align: center;
}
<section class="hero">
<div class="svg-container">
<a class="magic-link" href="#">
<svg class="gradient" id="svg1" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#EB3349" />
<stop offset="95%" stop-color="#EB3349" />
</linearGradient>
</defs>
<rect class="rect-shape" id="rect1" height="60" width="320" stroke-width="2" />
<polyline id="p1" points="0 0, 320 0, 320 60, 0 60, 0 0" fill="transparent" stroke="#E4E4E4"
stroke-width="8" stroke-dashoffset="440" stroke-dasharray="0 380" >
<animate id="an1"
attributeName="stroke-dasharray"
values="0 380 0 380;0 0 760 0"
dur="1s"
begin="p1.mouseover"
fill="freeze"
restart="whenNotActive" />
<animate id="an2"
attributeName="stroke-dasharray"
values="0 0 760 0;0 380 0 380"
dur="0.5s"
begin="an1.end"
fill="freeze"
restart="whenNotActive" />
</polyline>
<div class="text">Bottom left</div>
</svg>
</a>
</div>
</section>
Bottom-right
body {
max-width: 100vh;
margin: 0;
color: #fff;
font-size: 24px;
background: purple;
}
a, a:hover, a:focus, a:active, a:visited {
color: gold;
text-decoration: none;
font-size: 1em;
}
.hero {
height: 100vh;
width: 100vw;
}
.svg-container {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
max-height: 60px;
cursor: pointer;
}
.rect-shape {
stroke:#E4E4E4;
stroke-width:2;
fill:transparent;
}
.text {
font-family: serif;
font-size: 26px;
font-weight:bold;
line-height: 32px;
letter-spacing: 4px;
color: #E4E4E4;
top: -48px;
position: relative;
text-align: center;
}
</div>
</section>
<section class="hero">
<div class="svg-container">
<a class="magic-link" href="#">
<svg class="gradient" id="svg1" height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#EB3349" />
<stop offset="95%" stop-color="#EB3349" />
</linearGradient>
</defs>
<rect class="rect-shape" id="rect1" height="60" width="320" stroke-width="2" />
<polyline id="p1" points="0 0, 320 0, 320 60, 0 60, 0 0" fill="transparent" stroke="#E4E4E4"
stroke-width="8" stroke-dashoffset="0" stroke-dasharray="0 380" >
<animate id="an1"
attributeName="stroke-dasharray"
values="0 380 0 380;0 0 760 0"
dur="1s"
begin="p1.mouseover"
fill="freeze"
restart="whenNotActive" />
<animate id="an2"
attributeName="stroke-dasharray"
values="0 0 760 0;0 380 0 380"
dur="0.5s"
begin="an1.end"
fill="freeze"
restart="whenNotActive" />
</polyline>
<div class="text">Bottom right</div>
</svg>
</a>
Связанный вопрос: Как сделать разовую анимацию символа бесконечность?