<div class="other-24"><svg class="other-24__svg" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask class="other-24__svg-mask" id="other-24__svg-mask">
<path d="M24.134,271.117L314.506,50.834L788.19,191.784L668.806,578.434L143.517,557.638L24.134,271.117Z"></path>
<path d="M84.211,130.167L81.13,533.761L741.977,556.868L755.841,121.694L419.255,46.213L84.211,130.167Z"></path>
</mask>
</defs>
<g class="other-24__svg-base">
<path d="M24.134,271.117L314.506,50.834L788.19,191.784L668.806,578.434L143.517,557.638L24.134,271.117Z"></path>
<path d="M84.211,130.167L81.13,533.761L741.977,556.868L755.841,121.694L419.255,46.213L84.211,130.167Z"></path>
</g>
<foreignObject class="other-24__svg-image" mask="url(#other-24__svg-mask)" width="800" height="600"><img src="https://picsum.photos/id/237/700/600" /></foreignObject>
</svg>
<div class="other-24__char">？</div>
</div>
.other-24
svg.other-24__svg(
viewBox='0 0 800 600',
version='1.1',
xmlns='http://www.w3.org/2000/svg'
)
defs
mask#other-24__svg-mask.other-24__svg-mask
path(d=path1)
path(d=path2)
g.other-24__svg-base
path(d=path1)
path(d=path2)
foreignObject.other-24__svg-image(
mask='url(#other-24__svg-mask)',
width='800',
height='600'
)
img(src='https://picsum.photos/id/237/700/600')
.other-24__char ？
{
"path1": "M24.134,271.117L314.506,50.834L788.19,191.784L668.806,578.434L143.517,557.638L24.134,271.117Z",
"path2": "M84.211,130.167L81.13,533.761L741.977,556.868L755.841,121.694L419.255,46.213L84.211,130.167Z"
}
$BLOCK_NAME: '.other-24';
// 変数
#{ $BLOCK_NAME } {
position: relative;
width: 800px;
&__svg {
width: 100%;
&-mask {
> path {
stroke-width: 20px;
position: relative;
animation: other24SwitchMask 2s step-end infinite;
&:nth-child(even) {
animation-delay: 1s;
}
}
}
&-base {
> path {
fill: black;
animation: other24SwitchBase 2s step-end infinite;
&:nth-child(even) {
animation-delay: 1s;
}
}
}
&-image {
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
&__char {
position: absolute;
top: 0;
left: 0;
right: auto;
transform: rotate(-45deg);
font-size: 120px;
font-weight: bold;
animation: other24SwitchChar 2s step-end infinite;
}
}
@keyframes other24SwitchChar {
0% {
left: 0;
right: auto;
transform: rotate(-45deg);
}
50% {
left: auto;
right: 0;
transform: rotate(45deg);
}
100% {
left: auto;
right: 0;
transform: rotate(45deg);
}
}
@keyframes other24SwitchMask {
0% {
fill: transparent;
stroke: transparent;
}
50% {
fill: white;
stroke: #000;
}
100% {
fill: white;
stroke: #000;
}
}
@keyframes other24SwitchBase {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}