Desplazar el ancla y cambiar de ruta

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Vínculos entre anclas</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-14.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="stage"> <div class="work-field"> <div class="anchor anchor--one"></div> <div class="anchor anchor--two"></div> <div class="anchor anchor--three"></div> <div class="route route--bg route--one"></div> <div class="route route--bg route--two"></div> <div class="ship ship--one"></div> </div> </main> </body> </html>

.anchor--one { anchor-name: --a1; } .anchor--two { anchor-name: --a2; } .anchor--three { anchor-name: --a3; } .route--one { anchor-name: --r1; } .route--two { anchor-name: --r2; } .anchor--one { grid-row: {{gridRow}}; grid-column: {{gridColumn}}; } .ship { position-anchor: {{positionAnchor}}; }