<!DOCTYPE html>
<html>
<style>
.scissorHalf {
offset-path: path('M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190');
animation: followpath 4s linear infinite;
}
@keyframes followpath {
to {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Пример свойства offset-distance</h2>
<svg class="box"
width="700"
height="450"
viewBox="350 0 1400 900">
<title>House and Scissors</title>
<rect x="595"
y="423"
width="610"
height="377"
fill="#1c87c9" />
<polygon points="506,423 900,190 1294,423"
fill="#8ebf42" />
<polygon points="993,245 993,190 1086,190 1086,300"
fill="#666" />
<path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
fill="none"
stroke="black"
stroke-width="13"
stroke-linejoin="round"
stroke-linecap="round" />
<path id="secondScissorHalf" class="scissorHalf"