# SVG Blob Animation

## 1. Animate the 'd' attribute of <path> to morph shapes

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FF0066" d="M41.6,-16.1C48.3,7.1,44.2,31.1,30,41.4C15.9,51.7,-8.3,48.2,-29.4,34.3C-50.6,20.4,-68.7,-3.9,-63.3,-25.3C-57.9,-46.8,-28.9,-65.3,-5.7,-63.5C17.5,-61.6,34.9,-39.3,41.6,-16.1Z"/>
                  <!-- ^^^^ the 'd' attribute -->
</svg>
<!-- blob maker: https://www.blobmaker.app/ -->

### # 3 Different Ways
* #### By CSS *(Chrome Only)*

    /* Hover */
    .selector:hover {
        d:path("{{Shape2}}");
    } 
    /* CSS Animation */
    @keyframes blob {
        to {
            d:path("{{Shape2}}");
        }
    }

- https://codepen.io/uchardon/pen/jXzeXz

* #### By SVG SMIL *([IE not work](https://caniuse.com/svg-smil))*

    <animate attributeName="d" dur="8s" repeatCount="indefinite"
          values="{{Shape1}}; {{Shape2}}; {{Shape3}}; {{...ShapeN}}" />
    <!-- shapeshifter: https://shapeshifter.design/ -->

- https://codepen.io/sashokz/pen/wvaWOMy
- https://medium.com/@fareastsunflower/9b4c7c5d0aac

* #### By JS *(Best Support)*
- https://codepen.io/daniel-hult/pen/vYYdJXv
- https://tympanus.net/codrops/2017/06/28/organic-shape-animations-with-svg-clippath/

## 2. Use SVG Filter (Blur + Contrast ) to make gooey effect
### # Tutorials
- https://www.oxxostudio.tw/articles/201408/sticky-ball.html
- https://www.zhangxinxu.com/wordpress/2017/12/svg-filter-fuse-gooey-effect/
- https://ssk7833.github.io/blog/2016/03/09/implement-gooey-effect/
- https://css-tricks.com/gooey-effect/

**😢 Browser Support...NEED TEST**
- IE not work...
- Safari...??

###### tags: `svg`