A skin for react-rotary-knob that uses flubber to morph 2 paths

rotary-knob-morph-skin.js

import { interpolate } from "flubber"

const face1 = `M42.75,0.108 C19.553,0.108 0.681,18.979 0.681,42.176 C0.681,65.372 19.553,84.244 42.75,84.244 C65.945,84.244 84.818,65.372 84.818,42.176 C84.818,18.98 65.945,0.108 42.75,0.108 Z`
const face2 = `M78.522,63.852 C77.65,63.492 76.734,63.308 75.796,63.308 C73.319,63.308 71.069,64.573 69.775,66.614 L53.942,60.055 L72.486,52.375 C73.998,54.208 76.71,54.946 79.011,53.993 C81.891,52.798 83.262,49.481 82.071,46.606 C81.986,46.4 81.889,46.201 81.78,46.007 C83.033,44.077 83.297,41.63 82.385,39.429 C81.276,36.753 78.69,35.024 75.793,35.024 C74.855,35.024 73.939,35.207 73.067,35.568 C69.825,36.913 68.097,40.39 68.836,43.706 L56.958,48.626 L56.958,47.44 C63.491,42.69 67.761,35.011 67.761,26.335 C67.761,11.94 56.05,0.23 41.656,0.23 C27.261,0.23 15.55,11.94 15.55,26.335 C15.55,35.011 19.821,42.69 26.353,47.44 L26.353,48.628 L14.476,43.709 C15.215,40.393 13.486,36.914 10.243,35.569 C9.372,35.208 8.454,35.025 7.516,35.025 C4.62,35.025 2.033,36.754 0.926,39.429 C0.012,41.63 0.276,44.078 1.53,46.008 C1.422,46.199 1.326,46.399 1.241,46.604 C0.048,49.482 1.419,52.798 4.303,53.996 C6.594,54.944 9.322,54.202 10.828,52.377 L29.367,60.056 L13.534,66.615 C12.242,64.574 9.991,63.309 7.513,63.309 C6.576,63.309 5.659,63.493 4.787,63.853 C1.154,65.357 -0.577,69.537 0.927,73.17 C1.833,75.358 3.742,76.909 6.005,77.392 C6.065,77.606 6.138,77.815 6.223,78.021 C7.101,80.143 9.153,81.514 11.45,81.514 C12.194,81.514 12.922,81.368 13.615,81.081 C15.963,80.106 17.309,77.725 17.082,75.322 L41.652,65.145 L66.225,75.324 C66,77.728 67.346,80.106 69.693,81.081 C70.384,81.368 71.112,81.514 71.857,81.514 C74.153,81.514 76.205,80.143 77.082,78.024 C77.169,77.818 77.241,77.607 77.302,77.392 C79.564,76.91 81.474,75.359 82.38,73.17 C83.887,69.535 82.154,65.355 78.522,63.852 Z M30.552,53.766 C31.316,54.109 32.157,54.404 33.055,54.656 L33.055,56.479 C31.532,55.938 30.687,55.36 30.552,55.04 L30.552,53.766 Z M39.557,57.673 C38.734,57.624 37.966,57.548 37.254,57.449 L37.254,55.472 C38.013,55.562 38.783,55.627 39.557,55.671 L39.557,57.673 Z M43.756,55.672 C44.53,55.628 45.3,55.563 46.059,55.473 L46.059,57.451 C45.348,57.549 44.579,57.625 43.756,57.674 L43.756,55.672 Z M52.779,55.009 C52.625,55.358 51.771,55.941 50.258,56.479 L50.258,54.656 C51.154,54.406 51.99,54.11 52.753,53.768 C52.759,54.402 52.766,54.886 52.779,55.009 Z M72.366,46.791 C72.938,46.554 73.377,46.073 73.564,45.481 C73.751,44.888 73.664,44.245 73.331,43.72 C73.24,43.581 73.153,43.436 73.088,43.281 C72.47,41.787 73.184,40.067 74.676,39.448 C76.15,38.834 77.903,39.579 78.506,41.038 C78.99,42.207 78.656,43.549 77.677,44.38 C77.197,44.787 76.923,45.389 76.935,46.018 C76.946,46.648 77.238,47.239 77.732,47.629 C77.948,47.799 78.101,47.994 78.191,48.212 C78.499,48.954 78.143,49.808 77.404,50.115 C76.667,50.42 75.791,50.031 75.524,49.379 L75.469,49.161 C75.313,48.578 74.911,48.09 74.37,47.823 C73.828,47.557 73.197,47.536 72.64,47.767 L56.949,54.265 C56.948,53.97 56.948,53.591 56.948,53.177 L72.366,46.791 Z M19.75,26.335 C19.75,14.255 29.577,4.429 41.657,4.429 C53.737,4.429 63.563,14.256 63.563,26.335 C63.563,32.461 61.028,38.003 56.959,41.982 L56.959,41.636 C56.959,40.477 56.021,39.536 54.859,39.536 C53.715,39.536 52.792,40.452 52.764,41.588 C52.764,41.605 52.759,41.619 52.759,41.636 L52.772,48.752 C52.46,49.545 48.695,51.536 41.656,51.536 C34.618,51.536 30.852,49.545 30.552,48.835 L30.552,41.085 L30.552,41.037 C30.552,39.878 29.612,38.937 28.452,38.937 C27.292,38.937 26.352,39.877 26.352,41.037 L26.352,41.981 C22.286,38.003 19.75,32.462 19.75,26.335 Z M10.673,47.768 C10.416,47.661 10.142,47.608 9.869,47.608 C9.551,47.608 9.233,47.68 8.942,47.824 C8.4,48.091 7.999,48.579 7.842,49.162 L7.812,49.326 C7.512,50.051 6.634,50.414 5.912,50.118 C5.167,49.807 4.813,48.955 5.122,48.21 C5.21,47.995 5.364,47.801 5.579,47.632 C6.074,47.24 6.367,46.649 6.378,46.02 C6.389,45.39 6.116,44.789 5.636,44.381 C4.655,43.55 4.32,42.208 4.805,41.039 C5.409,39.581 7.159,38.834 8.635,39.449 C10.129,40.068 10.842,41.788 10.225,43.279 C10.159,43.437 10.07,43.583 9.981,43.721 C9.646,44.245 9.561,44.889 9.747,45.482 C9.934,46.074 10.373,46.554 10.946,46.792 L26.352,53.173 L26.352,54.263 L10.673,47.768 Z M13.716,72.172 C13.161,72.401 12.731,72.859 12.535,73.426 C12.339,73.994 12.396,74.619 12.69,75.143 L12.797,75.298 C13.104,76.039 12.75,76.894 12.009,77.201 C11.269,77.506 10.404,77.136 10.103,76.409 C10.013,76.193 9.985,75.956 10.018,75.683 C10.093,75.057 9.884,74.431 9.446,73.977 C9.048,73.565 8.501,73.333 7.933,73.333 C7.876,73.333 7.819,73.336 7.762,73.34 C6.472,73.439 5.288,72.722 4.807,71.562 C4.188,70.068 4.901,68.35 6.394,67.731 C7.87,67.117 9.621,67.861 10.227,69.325 C10.294,69.484 10.333,69.651 10.371,69.814 C10.508,70.417 10.905,70.929 11.454,71.213 C12.004,71.497 12.65,71.525 13.222,71.287 L34.854,62.326 L36.168,62.872 L13.716,72.172 Z M78.503,71.562 C78.024,72.722 76.827,73.442 75.55,73.34 C74.919,73.298 74.303,73.524 73.865,73.977 C73.427,74.431 73.219,75.057 73.293,75.683 C73.325,75.955 73.298,76.193 73.208,76.412 C72.908,77.136 72.035,77.506 71.305,77.201 C70.562,76.893 70.206,76.039 70.493,75.354 L70.622,75.142 C70.916,74.619 70.972,73.994 70.776,73.425 C70.581,72.858 70.15,72.401 69.594,72.171 L44.583,61.812 C45.298,61.755 45.995,61.683 46.672,61.587 L70.089,71.287 C70.663,71.524 71.308,71.497 71.858,71.213 C72.408,70.929 72.804,70.416 72.941,69.814 C72.979,69.648 73.018,69.479 73.086,69.319 C73.689,67.863 75.439,67.117 76.916,67.731 C78.409,68.351 79.121,70.068 78.503,71.562 Z M35.598,35.723 C31.362,35.723 27.929,34.587 27.93,29.996 C27.93,25.404 31.363,21.682 35.598,21.682 C39.833,21.682 40.681,25.404 40.681,29.996 C40.681,34.587 39.833,35.723 35.598,35.723 Z M47.715,35.723 C43.48,35.723 42.633,34.587 42.633,29.996 C42.633,25.404 43.481,21.682 47.715,21.682 C51.949,21.682 55.383,25.404 55.383,29.996 C55.383,34.587 51.949,35.723 47.715,35.723 Z M38.769,38.638 C39.858,38.638 40.474,39.855 40.813,41.318 C41.103,42.567 41.191,43.994 41.191,45.002 C41.191,47.19 40.787,47.731 38.769,47.731 C36.752,47.731 35.116,47.19 35.116,45.002 C35.116,43.966 35.486,42.484 36.087,41.21 C36.755,39.797 37.707,38.638 38.769,38.638 Z M44.544,47.73 C42.525,47.73 42.122,47.189 42.121,45.002 C42.121,44.003 42.207,42.595 42.49,41.356 C42.827,39.875 43.444,38.637 44.543,38.637 C45.668,38.637 46.674,39.937 47.345,41.466 C47.876,42.677 48.197,44.033 48.197,45.001 C48.197,47.189 46.562,47.73 44.544,47.73 Z`

const interpolator = interpolate(face1, face2)
export default {
  knobX: 71,
  knobY: 71,
  svg: `

<svg width="204px" height="204px" viewBox="0 0 204 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#444040" stop-opacity="0.51098279" offset="0%"></stop>
            <stop stop-color="#131111" stop-opacity="0.893200861" offset="100%"></stop>
        </linearGradient>
        <circle id="path-2" cx="99.0392157" cy="99.0392157" r="98.0392157"></circle>
        <filter x="-3.3%" y="-3.3%" width="106.6%" height="106.6%" filterUnits="objectBoundingBox" id="filter-3">
            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
            <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"></stop>
            <stop stop-color="#000000" stop-opacity="0.5" offset="100%"></stop>
        </linearGradient>
        <circle id="path-5" cx="99" cy="99" r="86"></circle>
        <filter x="-4.1%" y="-3.5%" width="108.1%" height="108.1%" filterUnits="objectBoundingBox" id="filter-6">
            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
            <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="morphpath" transform="translate(3.000000, 3.000000)">
            <g id="container">
                <g id="Oval-2">
                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
                    <use stroke-opacity="0.626811594" stroke="#979797" stroke-width="1" fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
                </g>
                <g id="Oval-2">
                    <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
                    <use fill="" fill-rule="evenodd" xlink:href="#path-5"></use>
                    <use stroke="#4A4A4A" stroke-width="1" fill="url(#linearGradient-4)" fill-rule="evenodd" xlink:href="#path-5"></use>
                </g>
                <g id="knob" transform="translate(28.431373, 28.431373)">
                    <circle id="Oval-5" fill="#322E2E" cx="71" cy="71" r="71"></circle>
                    <path d="M72.0588235,3.61251045 L88.2352941,16.78544 C81.1775685,18.0640554 75.7854116,18.7033631 72.0588235,18.7033631 C68.3322354,18.7033631 62.9400786,18.0640554 55.8823529,16.78544 L72.0588235,3.61251045 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.058824, 11.157937) scale(1, -1) translate(-72.058824, -11.157937) "></path>
                </g>
                <g id="label" stroke="#979797">
                    <circle id="Oval-6" transform="translate(100.000000, 100.000000) rotate(-45.000000) translate(-100.000000, -100.000000) " cx="100" cy="100" r="70.5882353"></circle>
                </g>
                <g id="status" transform="translate(58.000000, 58.000000)">
                    <path d="M42.75,0.108 C19.553,0.108 0.681,18.979 0.681,42.176 C0.681,65.372 19.553,84.244 42.75,84.244 C65.945,84.244 84.818,65.372 84.818,42.176 C84.818,18.98 65.945,0.108 42.75,0.108 Z" id="Shape" stroke="#F7EFEF" fill-rule="nonzero"></path>
                    <g id="sadface" transform="translate(22.000000, 27.000000)">
                        <path d="M14.598,14.723 C18.833,14.723 19.681,13.587 19.681,8.996 C19.681,4.404 18.833,0.682 14.598,0.682 C10.363,0.682 6.93,4.404 6.93,8.996 C6.929,13.587 10.362,14.723 14.598,14.723 Z" id="Shape" fill="#D8D8D8"></path>
                        <polyline id="Path" stroke="#F1ECEC" points="0.887091858 4.76033805 7.27604172 27.2567523 35.7275294 27.2567523 39.5497743 1.47845211"></polyline>
                        <path d="M26.715,14.723 C30.949,14.723 34.383,13.587 34.383,8.996 C34.383,4.404 30.949,0.682 26.715,0.682 C22.481,0.682 21.633,4.404 21.633,8.996 C21.633,13.587 22.48,14.723 26.715,14.723 Z" id="Shape" fill="#D8D8D8"></path>
                        <path d="M17.769,17.638 C16.707,17.638 15.755,18.797 15.087,20.21 C14.486,21.484 14.116,22.966 14.116,24.002 C14.116,26.19 15.752,26.731 17.769,26.731 C19.787,26.731 20.191,26.19 20.191,24.002 C20.191,22.994 20.103,21.567 19.813,20.318 C19.474,18.855 18.858,17.638 17.769,17.638 Z" id="Shape" fill="#D8D8D8"></path>
                        <path d="M23.544,26.73 C25.562,26.73 27.197,26.189 27.197,24.001 C27.197,23.033 26.876,21.677 26.345,20.466 C25.674,18.937 24.668,17.637 23.543,17.637 C22.444,17.637 21.827,18.875 21.49,20.356 C21.207,21.595 21.121,23.003 21.121,24.002 C21.122,26.189 21.525,26.73 23.544,26.73 Z" id="Shape" fill="#D8D8D8"></path>
                    </g>
                    <g id="happyface" transform="translate(29.000000, 30.000000)" fill="#D8D8D8">
                        <path d="M25.1695635,22.3547409 C18.8734647,28.6520274 8.62760611,28.6520274 2.32913186,22.3547409 C1.8647337,21.8909366 1.11290752,21.8909366 0.649103224,22.3547409 C0.185298925,22.8185452 0.185298925,23.5715591 0.649103224,24.0341756 C4.26095693,27.6454355 9.00530078,29.4513624 13.7496446,29.4513624 C18.4933946,29.4513624 23.2389262,27.6454355 26.8495922,24.0341756 C27.3128026,23.5703713 27.3128026,22.8185452 26.8495922,22.3547409 C26.385194,21.8909366 25.6339617,21.8909366 25.1695635,22.3547409 Z" id="Path"></path>
                        <path d="M7.325,7.298 C9.146,7.298 10.623,5.821 10.623,4 C10.623,2.179 9.146,0.702 7.325,0.702 C5.503,0.702 4.027,2.179 4.027,4 C4.027,5.821 5.503,7.298 7.325,7.298 Z" id="Path"></path>
                        <path d="M19.703,8.297 C21.523,8.297 23,6.821 23,5 C23,3.179 21.523,1.703 19.703,1.703 C17.883,1.703 16.406,3.179 16.406,5 C16.406,6.821 17.883,8.297 19.703,8.297 Z" id="Path"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
`,
  updateAttributes: [
    {
      element: "#status>path",
      attrs: [
        {
          name: "d",
          value: (props, value) => {
            return interpolator( value / props.max)
          }
        }
      ]
    }, 
    {
        //hide happy face incrementally
      element: "#status #happyface",
      attrs: [
        {
          name: "opacity",
          value: (props, value) => {
            return  ((props.max -  value) / props.max ) + ''
          }
        }
      ]
    },
    {
    //show sad face incrementally
      element: "#status #sadface",
      attrs: [
        {
          name: "opacity",
          value: (props, value) => {
            return  (value / props.max ) + ''
          }
        }
      ]
    }
  ]
};