One interesting technique is to implement a feature where you can switch between displaying two different polygons.
.hide {
display:none;
}
input:checked~svg .hide {
display:block;
}
input:checked~svg .show {
display:none;
}
<body>
<input type="checkbox" >
<svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="show">
</polygon>
<polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="hide">
<animate attributeName="points" dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/>
</polygon>
</svg>
</body>
Another approach is to utilize the click event. By placing two rectangles on top of each other and using z-index in CSS, you can create an interactive experience:
Here is a simple example, but feel free to enhance the appearance of the red rectangle to make it more appealing as it will be the one users have to click on.
label {
position:absolute;
z-index:0;
}
input:checked + label {
z-index:1;
}
<body>
<input type="checkbox" id="input" >
<label for="input"><svg viewBox="0 0 10 10" height="20">
<rect id="stop" x=0 y=0 width="100%" height="100%" fill="red" />
</svg></label>
<label for="input"><svg viewBox="0 0 10 10" height="20">
<rect id="start" x=0 y=0 width="100%" height="100%" fill="red" />
</svg></label>
<svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="hide">
<animate attributeName="points" begin="start.click" end="stop.click" dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/>
</polygon>
</svg>
</body>
If you prefer a CSS-only solution, achieving this effect is quite straightforward with just a few lines of code:
img {
width: 400px;
display:block;
clip-path: polygon(0 0, 0 100%, 100% 100%, 50% 0);
animation:change 5s linear infinite paused;
}
input:checked + img {
animation-play-state:running;
}
@keyframes change{
50% {
clip-path: polygon(50% 40%, 30% 60%, 80% 10%, 50% 70%)
}
}
<input type="checkbox" >
<img src="https://picsum.photos/id/1000/800/800">