SVG clipPath

Инклудим файл с переменной:

@@include('./parts/modules/navbar/navbar.html', {
    "page": "page1",
})

Условия в navbar.html:

@@if (page === 'page1') {
    <span>Navbar for page 1</span>
}
@@if (page === 'page2') {
    <span>Navbar for page 2</span>
}

Переменную page и ее значения можете менять как угодно.

Девтулз Firefox говорит в чем проблема:

Просто добавтье px в keyframes. Пример:

@-webkit-keyframes circle1 {
    0% { r: 20px;}
    15% { r: 30px; cy: -30px;}
    30% { r: 20px; cy: 20px;}
    45% { cy: 10px; }
    60% { cy: 20px; }
}