Анимация симметричного заполнения фигур из одной точки
Подробно рассказано об этой оригинальной технике здесь. Смотрите вторую половину ответа.
Патч взял из ответа @Kvilios
Максимальная длина его - 257px
. Половина - 128.5px
Четверть пути - 64.2px
. Эти цифры понадобятся для сдвига начала path
командой stroke-dashoffset="128.5"
Пример заполнения фигуры из середины path
Обратите внимание, что фигура одновременно, симметрично заполняется из центра, пока края не сомкнутся.
body {background:#2F2F2F;}
.container
{
width:50%;
height:50%;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 20 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<path id="path1" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="greenyellow" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate
xlink:href="#path1"
attributeName="stroke-dasharray"
values="0 128.5 0 128.5;0 0 257 0"
begin="btn.click"
dur="4s"
fill="freeze"/>
</path>
<g id="btn" transform="translate(12 0)">
<rect x="20" y="84" width="35" height="15" rx="5" fill="none" stroke="dodgerblue"/>
<text x="24" y="94" font-size="10" fill="crimson" >Центр</text>
</g>
</svg>
</div>
Комплексный пример заполнения
Начать заполнение можно из любой точки фигуры, для этого надо сдвинуть начало рисования линии от начала с помощью изменения числового значения атрибута stroke-dashoffset
В приложении кнопка L, - запускает рисование с левого края
R - справа (right)
T - сверху (top)
C - центр (center)
B - снизу (bottom)
На эти обозначения ориентируйтесь при разборе кода id="btn_c"
, <path id="center"
.container
{
width:40%;
height:40%;
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- Средняя точка начала анимации в центре слева stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate
attributeName="stroke-dasharray"
values="0 128.5 0 128.5;0 0 257 0"
begin="btn_C.click"
dur="4s"
restart="whenNotActive" />
</path>
<!-- Средняя точка слева stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate
attributeName="stroke-dasharray"
values="0 128.5 0 128.5;0 0 257 0"
begin="btn_L.click"
dur="4s"
restart="whenNotActive" />
</path>
<!-- Средняя точка слева сверху stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate
attributeName="stroke-dasharray"
values="0 128.5 0 128.5;0 0 257 0"
begin="btn_T.click"
dur="4s"
restart="whenNotActive" />
</path>
<!-- Средняя точка справа внизу stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate
attributeName="stroke-dasharray"
values="0 128.5 0 128.5;0 0 257 0"
begin="btn_B.click"
dur="4s"
restart="whenNotActive" />
</path>
<!-- Средняя точка справа stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate
attributeName="stroke-dasharray"
values="0 128.5 0 128.5;0 0 257 0"
begin="btn_R.click"
dur="4s"
restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="dodgerblue"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>
LIVE DEMO