Kute.js : SVG 의 path 를 morph 하기

< 참고자료 >

 

tagilog.tistory.com/539

인기 JavaScript 애니메이션 라이브러리 11 선

github.com/thednp/kute.js/wiki/How-To-Use

thednp.github.io/kute.js/svgMorph.html

---

< 용도 >

 

svg path 를 다양한 방식으로 변형하게해주는 라이브러리이다.

가장 중요한 svg morph 기능을 가장 잘 표현해준다.

---

< 유지보수 >

 

2015년에 시작하여..

2021년 9월에 마지막으로 업데이트도있다.

---

< 예제 >

위와 같이 morph 가 일어나면 실제 path 값이 실시간으로 변경된다.

 

<template>
    
    <div id="container">

        <svg 
        
            xmlns                   ="http://www.w3.org/2000/svg"
            width                   ="100%"
            height                  ="100%" 
            viewBox                 ="0 0 141.7 141.7" 
            preserveAspectRatio     ="none"
            
        >

            <path id="shape-root"   d="M0 0h141.7v141.7H0z"/>
            <path id="shape-1"      d="M0 0h141.7v141.7H0z"/>            
            <path id="shape-2"      d="M70.9 0l21.9 44.4 48.9 7.1L106.3 86l8.4 48.8-43.8-23-43.8 23L35.4 86 0 51.5l49-7.1z"/>
            <path id="shape-3"      d="M140.3 134.3c-.3.1-1.3 1-1.7 1.1-1 .4-1.3 0-2.3-.6-.9-.6-2.4-2-3.1-2.9-1.3-1.9-5.5-8.9-6.8-10.7-1.3-1.7-5.3-5.9-10.2-7.7-10.3-3.7-16.7-1.8-18.8-2.8-3.7-1.7-5.1-5.5-4.6-10.6.2-2.2-.1-11.4-1.1-20.8C90.5 68.7 88 57.1 75 48.9c-6.7-4.2-8.7-4.1-12.4-5.5-7.2-2.8-14.8-4.2-19.8-12-1.2-1.8-2-3.9-3.1-5.8-.9-1.8-1.8-3.5-2.8-5.3-.9-1.6-3.8-6.5-6.5-8.8-1.4-1.2-3.4-1.8-5-2.3-1-.3-4.8-.8-5.6-1.4-1.5-1.2-2.7-2.7-4.5-3.6-1.5-.8-3-2-4.4-2.8-1.1-.6-4-3-3.3.2.4 2 1.2 3.9 1.7 5.8.3.9.8 1.8.9 2.7.1 1.5-.2 2-1.1 2.9-1.1 1.2-2.5 2.7-3.5 4.2-.6.9-1.3 1.8-1.8 2.8-.3.5-.5.9-.4 1.6 0 .4.3.8.3 1.2 0 1-.9 1.9-1.3 2.8-.4.9-.9 1.7-1.4 2.5-.4.7-1 1.5-1 2.4s.7 1.7.9 2.5c.3 1.1.7 4.5 2.4 4.3l.1.1c.7 1.6 1.6 3.5 3.2 3.7 1 .1 2-.2 2.9-.2 1-.1 2 0 3.1 0 2.5 0 3.6 5.9 3.8 6.9.2 1.1.2 2.1.1 3.3-.3 4.3-1.9 8.7-.8 13.2.6 2.4.7 4.4 1.8 6.7 1 2 2.5 3.6 3.8 5.4 1.3 1.8 2.4 4 3.4 6 1 1.8 1.8 3.9 1.9 6 .3 4.7 1.3 9.5 1.7 14.2.2 2.4-.4 4.7-.4 7.1 0 2.3 0 4.8.2 7.1.2 2 .4 4.6-.6 6.4-.6.9-1 1.6-1.9 2-1 .4-1.9 0-2.9.3-1.2.3-1.6 1.9-1.3 3.1.3 1.4 1.3 1.7 2.4 1.6.7 1.6 3.1 1.1 4.4.9 1.5-.3 3.1-.5 4.5-1h.7c-.1 1.9 3.3 1.9 3.2.3 1 .6 1.5.9 2.7.5-.1-.2 1-.3.9-.5.9-.7 1.7-.3 2.7-.2 1.3.1 17.3 1.9 18.3 1.8 1-.1 8.5.2 10.5-.3 5.9-1.3 10.2-4.7 25.6-11.2 6.3-2.6 14.4-1.4 18.3-.2 3.9 1.1 6.6 5.3 8.8 8.8 1.2 1.9 2 3.7 3.4 5.4 1.3 1.6 2.4 3.2 4 4.5 1.6 1.3 3.7 2.3 5.5 2.7 2 .4 3.7-1.3 4.3-3.4.3-1.1.1-4.5-1.3-4zm-101-11.8c-.8.1-1.2.2-1.9.6-.2.2-.6.4-.8.6-.2.2-.3.6-.6.7.1-.9.6-1.7.9-2.5.3-.9 2.8-23.5 2.4-28-.1-1.6.7 2.1.7 2.1-.4.4-1.2 6.4 1.4 15.7 2 6.9 11.2 11.6 11.6 12-.5.1-12.9-1.3-13.7-1.2z"/>
            <path id="shape-4"      d="M141.7 70.9l-40.2 2.7 39.2 9.6-40.2-4.4 37 16.3-38.8-11.3 33.5 22.5L96 88.5l29.1 27.9-32.5-23.8 23.8 32.5L88.5 96l17.8 36.2-22.5-33.5 11.3 38.8-16.3-37 4.4 40.2-9.6-39.2-2.7 40.2-2.7-40.2-9.6 39.2 4.3-40.2-16.3 37 11.3-38.8-22.5 33.5L53.3 96l-28 29.1 23.8-32.5-32.5 23.8 29.1-27.9-36.2 17.8L43 83.8 4.3 95.1l36.9-16.3-40.1 4.4 39.2-9.6L0 70.9l40.3-2.7-39.2-9.6 40.1 4.3L4.3 46.6 43 57.9 9.5 35.4l36.2 17.9-29.1-28 32.5 23.8-23.8-32.5 28 29.1L35.4 9.5 57.9 43 46.6 4.3l16.3 36.9-4.3-40.1 9.6 39.2L70.9 0l2.7 40.3 9.6-39.2-4.4 40.1L95.1 4.3 83.8 43l22.5-33.5-17.8 36.2 27.9-29.1-23.8 32.5 32.5-23.8-29.1 28 36.2-17.9-33.5 22.5 38.8-11.3-37 16.3 40.2-4.3-39.2 9.6z"/>

        </svg>

    </div>

</template>

<script>

    import Kute from 'kute.js'

    export default {

        setup() {

            let counter = 0
            const pathIds = [ '#shape-1', '#shape-2', '#shape-3', '#shape-4']
            const options = {

                morphPrecision  : 10,
                duration        : 500,
                easing          : 'easingCubicInOut',

            }

            setInterval(() => {

                ++counter

                if (counter > 3) counter = 0

                // 제일 중요한 코드!!!
                Kute.to('#shape-root', { path: pathIds[counter] }, options).start();

            }, options.duration + 100)

        }
        
    }
</script>

<style scoped>

    #container {

        width : 500px;
        height : 500px;
        background-color: black;

    }

    #shape-root                                 { fill : blueviolet; }
    #shape-1, #shape-2, #shape-3, #shape-4      { visibility: hidden;}

</style>

morphPrecision 10이 최소값이며, 1 이 가장 cpu 소비가 크다.

1로 해보니 브라우저가 랙이 걸릴정도였다.

값을 10으로 두고 큰 문제가 없다면 애초에 morphPrecision 객체를 인자에서 빼버리면 default 인 10으로 설정된다.

그냥 default 로 사용하는게 좋을듯하다..