animate.scss

:root {
    --size: 4vmin;
}

.div {
    @apply bg-blue-400 w-10 h-10 rounded relative m-2;
    --size: 8vmin;
    width: var(--size);
    height: var(--size);
}

.morph-demo {
    @apply mb-6;
}

@property --stroke {
    syntax: '<color>';
    inherits: false;
    initial-value: theme("colors.white");
}

.svg-1 path {
    fill: none;
    stroke: var(--stroke);
    stroke-linecap: round;
    stroke-linejoin: round;


    &#using-flubber {
        fill: theme("colors.white");
    }
}

.dark .svg-1 path {
    --stroke: theme("colors.tertiary");

    &#using-flubber {
        fill: theme("colors.tertiary");
    }
}

.add-remove-btns {
    position: relative;
    z-index: 25;
}

.el,
.el-initial {
    border-radius: 3px;
    width: var(--size);
    height: var(--size);
    // margin-bottom: 5px;
    /*     transform: scale(1); */
    // border-radius: 8%;
    background: #616aff;
    position: relative;
}

.el-initial {
    opacity: 0.6;
    position: absolute;
    display: block;
    margin-top: 0;
    top: 0;
    left: 0;
}

.motion-path {
    position: relative;
}

.motion-path .el-1 {
    position: absolute;
    offset-path: path(
        "M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
    );
    // offset-path: url("#follow-path");
    offset-distance: 0;
}

.motion-path .el-2 {
    position: absolute;
    transform-origin: center center;
    top: calc(var(--size) / -2);
    left: calc(var(--size) / -2);
}

.animation-container {
    transition: background-color 0.5s ease;
    background-color: rgba(0, 0, 0, 0.085);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;

    &:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }
}

.playback-demo {
    @apply overflow-auto;
}

.contain {
    position: relative;
    height: var(--size);
    margin-bottom: 5px;
}

.animation-container + .animation-container {
    margin-top: 2em;
}

input[type="range"] {
    width: 100%;
    padding: 0;
    margin: 0;
}
html:not(.unsupported) .support {
    display: none;
}

.col-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
// Cool
#playstate-toggle[data-playstate="running"] {
    .fa-play,
    .fa-redo {
        display: none;
    }
}
#playstate-toggle[data-playstate="paused"] {
    .fa-pause,
    .fa-redo {
        display: none;
    }
}

#playstate-toggle[data-playstate="finished"] {
    .fa-play,
    .fa-pause {
        display: none;
    }
}