SVG Morphing Shape Loader
SVGパスが三角形→四角形→円とスムーズにモーフィングするローダー。
HTML
<svg class="smsl-svg" viewBox="0 0 100 100" width="100" height="100"> <path id="smsl-path" fill="none" stroke="#6366f1" stroke-width="2"></path> </svg>
CSS
.smsl-svg {
display: block;
}
JavaScript
const shapes = [
'M50 15 L85 75 L15 75 Z',
'M20 20 L80 20 L80 80 L20 80 Z',
'M50 10 C75 10 90 30 90 50 C90 70 75 90 50 90 C25 90 10 70 10 50 C10 30 25 10 50 10 Z'
];
let idx = 0;
const path = document.getElementById('smsl-path');
path.setAttribute('d', shapes[0]);
function morphNext() {
idx = (idx + 1) % shapes.length;
anime({
targets: path,
d: [{ value: shapes[idx] }],
duration: 800,
easing: 'easeInOutQuad',
complete: function() { setTimeout(morphNext, 400); }
});
}
morphNext();