@ryohey/react-svg-spinners
Version:
> A collection of [SVG Spinners](https://github.com/n3r4zzurr0/svg-spinners) components for React.
6 lines (5 loc) • 1.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { stringDurationToFloat } from "./util";
export default function GooeyBallsTwo({ width = 24, height = 24, dur = "2s", color, }) {
return (_jsxs("svg", { width: width, height: height, fill: color, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("filter", { id: "g", children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "b" }), _jsx("feColorMatrix", { in: "b", mode: "matrix", values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7", result: "g" }), _jsx("feBlend", { in: "SourceGraphic", in2: "g" })] }) }), _jsxs("g", { filter: "url(#g)", children: [_jsx("circle", { cx: "5", cy: "12", r: "4", children: _jsx("animate", { attributeName: "cx", calcMode: "spline", dur: dur, values: "5;8;5", keySplines: ".36,.62,.43,.99;.79,0,.58,.57", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "19", cy: "12", r: "4", children: _jsx("animate", { attributeName: "cx", calcMode: "spline", dur: dur, values: "19;16;19", keySplines: ".36,.62,.43,.99;.79,0,.58,.57", repeatCount: "indefinite" }) }), _jsx("animateTransform", { attributeName: "transform", type: "rotate", dur: stringDurationToFloat(dur) / (3 / 4), values: "0 12 12;360 12 12", repeatCount: "indefinite" })] })] }));
}