react-svg-spinners
Version:
> A collection of [SVG Spinners](https://github.com/n3r4zzurr0/svg-spinners) components for React.
1,739 lines (1,711 loc) • 97.9 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
BarsFade: () => BarsFade,
BarsRotateFade: () => BarsRotateFade,
BarsScale: () => BarsScale,
BarsScaleFade: () => BarsScaleFade,
BarsScaleMiddle: () => BarsScaleMiddle,
BlocksScale: () => BlocksScale,
BlocksShuffleThree: () => BlocksShuffleThree,
BlocksShuffleTwo: () => BlocksShuffleTwo,
BlocksWave: () => BlocksWave,
BouncingBall: () => BouncingBall,
Clock: () => Clock,
DotRevolve: () => DotRevolve,
Eclipse: () => Eclipse,
EclipseHalf: () => EclipseHalf,
GoeeyBallsOne: () => GooeyBallsOne,
GoeeyBallsTwo: () => GooeyBallsTwo,
Multiple: () => PulseRingsMultiple,
NinetyRing: () => NinetyRing,
NinetyRingWithBg: () => NinetyRingWithBg,
OneEightyRing: () => OneEightyRing,
OneEightyRingWithBg: () => OneEightyRingWithBg,
Pulse: () => Pulse,
PulseMultiple: () => PulseMultiple,
PulseRing: () => PulseRing,
PulseRingsThree: () => PulseRingsThree,
PulseRingsTwo: () => PulseRingsTwo,
PulseThree: () => PulseThree,
PulseTwo: () => PulseTwo,
SixDotsRotate: () => SixDotsRotate,
SixDotsScale: () => SixDotsScale,
SixDotsScaleMiddle: () => SixDotsScaleMiddle,
Tadpole: () => Tadpole,
ThreeDotsBounce: () => ThreeDotsBounce,
ThreeDotsFade: () => ThreeDotsFade,
ThreeDotsMiddle: () => ThreeDotsScaleMiddle,
ThreeDotsMoving: () => ThreeDotsMoving,
ThreeDotsRotate: () => ThreeDotsRotate,
ThreeDotsScale: () => ThreeDotsScale,
TwelveDotsScaleRotate: () => ThreeDotsScaleRotate,
TwoSeventyRing: () => TwoSeventyRing,
TwoSeventyRingWithBg: () => TwoSeventyRingWithBg,
Wifi: () => Wifi,
WifiFade: () => WifiFade,
WindToy: () => WindToy
});
module.exports = __toCommonJS(src_exports);
// src/components/BarsFade.tsx
var import_react = __toESM(require("react"));
function BarsFade({
width = 24,
height = 24,
color,
dur = "0.75s"
}) {
return /* @__PURE__ */ import_react.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react.default.createElement("rect", {
x: "1",
y: "4",
width: "6",
height: "14",
opacity: "1"
}, /* @__PURE__ */ import_react.default.createElement("animate", {
id: "a",
begin: "0;b.end-0.25s",
attributeName: "opacity",
dur,
values: "1;.2",
fill: "freeze"
})), /* @__PURE__ */ import_react.default.createElement("rect", {
x: "9",
y: "4",
width: "6",
height: "14",
opacity: ".4"
}, /* @__PURE__ */ import_react.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "opacity",
dur,
values: "1;.2",
fill: "freeze"
})), /* @__PURE__ */ import_react.default.createElement("rect", {
x: "17",
y: "4",
width: "6",
height: "14",
opacity: ".3"
}, /* @__PURE__ */ import_react.default.createElement("animate", {
id: "b",
begin: "a.begin+0.3s",
attributeName: "opacity",
dur,
values: "1;.2",
fill: "freeze"
})));
}
// src/components/BarsRotateFade.tsx
var import_react2 = __toESM(require("react"));
function BarsRotateFade({
width = 24,
height = 24,
dur = "0.75s",
color
}) {
return /* @__PURE__ */ import_react2.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react2.default.createElement("g", null, /* @__PURE__ */ import_react2.default.createElement("rect", {
x: "11",
y: "1",
width: "2",
height: "5",
opacity: ".14"
}), /* @__PURE__ */ import_react2.default.createElement("rect", {
x: "11",
y: "1",
width: "2",
height: "5",
transform: "rotate(30 12 12)",
opacity: ".29"
}), /* @__PURE__ */ import_react2.default.createElement("rect", {
x: "11",
y: "1",
width: "2",
height: "5",
transform: "rotate(60 12 12)",
opacity: ".43"
}), /* @__PURE__ */ import_react2.default.createElement("rect", {
x: "11",
y: "1",
width: "2",
height: "5",
transform: "rotate(90 12 12)",
opacity: ".57"
}), /* @__PURE__ */ import_react2.default.createElement("rect", {
x: "11",
y: "1",
width: "2",
height: "5",
transform: "rotate(120 12 12)",
opacity: ".71"
}), /* @__PURE__ */ import_react2.default.createElement("rect", {
x: "11",
y: "1",
width: "2",
height: "5",
transform: "rotate(150 12 12)",
opacity: ".86"
}), /* @__PURE__ */ import_react2.default.createElement("rect", {
x: "11",
y: "1",
width: "2",
height: "5",
transform: "rotate(180 12 12)"
}), /* @__PURE__ */ import_react2.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
calcMode: "discrete",
dur,
values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/BarsScale.tsx
var import_react3 = __toESM(require("react"));
function BarsScale({
width = 24,
height = 24,
dur = "0.6s",
color
}) {
return /* @__PURE__ */ import_react3.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react3.default.createElement("rect", {
x: "1",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react3.default.createElement("animate", {
id: "a",
begin: "0;b.end-0.1s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
}), /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "0;b.end-0.1s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
})), /* @__PURE__ */ import_react3.default.createElement("rect", {
x: "5.8",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
}), /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
})), /* @__PURE__ */ import_react3.default.createElement("rect", {
x: "10.6",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
}), /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
})), /* @__PURE__ */ import_react3.default.createElement("rect", {
x: "15.4",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
}), /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
})), /* @__PURE__ */ import_react3.default.createElement("rect", {
x: "20.2",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react3.default.createElement("animate", {
id: "b",
begin: "a.begin+0.4s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
}), /* @__PURE__ */ import_react3.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
})));
}
// src/components/BarsScaleFade.tsx
var import_react4 = __toESM(require("react"));
function BarsScaleFade({
width = 24,
height = 24,
dur = "0.75s",
color
}) {
return /* @__PURE__ */ import_react4.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react4.default.createElement("rect", {
x: "1",
y: "4",
width: "6",
height: "14",
opacity: "1"
}, /* @__PURE__ */ import_react4.default.createElement("animate", {
id: "a",
begin: "0;b.end-0.25s",
attributeName: "y",
dur,
values: "1;5",
fill: "freeze"
}), /* @__PURE__ */ import_react4.default.createElement("animate", {
begin: "0;b.end-0.25s",
attributeName: "height",
dur,
values: "22;14",
fill: "freeze"
}), /* @__PURE__ */ import_react4.default.createElement("animate", {
begin: "0;b.end-0.25s",
attributeName: "opacity",
dur,
values: "1;.2",
fill: "freeze"
})), /* @__PURE__ */ import_react4.default.createElement("rect", {
x: "9",
y: "4",
width: "6",
height: "14",
opacity: ".4"
}, /* @__PURE__ */ import_react4.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "y",
dur: "0.75s",
values: "1;5",
fill: "freeze"
}), /* @__PURE__ */ import_react4.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "height",
dur,
values: "22;14",
fill: "freeze"
}), /* @__PURE__ */ import_react4.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "opacity",
dur,
values: "1;.2",
fill: "freeze"
})), /* @__PURE__ */ import_react4.default.createElement("rect", {
x: "17",
y: "4",
width: "6",
height: "14",
opacity: ".3"
}, /* @__PURE__ */ import_react4.default.createElement("animate", {
id: "b",
begin: "a.begin+0.3s",
attributeName: "y",
dur,
values: "1;5",
fill: "freeze"
}), /* @__PURE__ */ import_react4.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "height",
dur,
values: "22;14",
fill: "freeze"
}), /* @__PURE__ */ import_react4.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "opacity",
dur,
values: "1;.2",
fill: "freeze"
})));
}
// src/components/BarsScaleMiddle.tsx
var import_react5 = __toESM(require("react"));
function BarsScaleMiddle({
width = 24,
height = 24,
dur = "0.6s",
color
}) {
return /* @__PURE__ */ import_react5.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react5.default.createElement("rect", {
x: "1",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
}), /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
})), /* @__PURE__ */ import_react5.default.createElement("rect", {
x: "5.8",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
}), /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
})), /* @__PURE__ */ import_react5.default.createElement("rect", {
x: "10.6",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react5.default.createElement("animate", {
id: "a",
begin: "0;b.end-0.1s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
}), /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "0;b.end-0.1s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
})), /* @__PURE__ */ import_react5.default.createElement("rect", {
x: "15.4",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
}), /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
})), /* @__PURE__ */ import_react5.default.createElement("rect", {
x: "20.2",
y: "6",
width: "2.8",
height: "12"
}, /* @__PURE__ */ import_react5.default.createElement("animate", {
id: "b",
begin: "a.begin+0.4s",
attributeName: "y",
calcMode: "spline",
dur,
values: "6;1;6",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
}), /* @__PURE__ */ import_react5.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "height",
calcMode: "spline",
dur,
values: "12;22;12",
keySplines: ".14,.73,.34,1;.65,.26,.82,.45"
})));
}
// src/components/BlocksScale.tsx
var import_react6 = __toESM(require("react"));
function BlocksScale({
width = 24,
height = 24,
dur = "0.6s",
color
}) {
return /* @__PURE__ */ import_react6.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react6.default.createElement("rect", {
x: "1.5",
y: "1.5",
rx: "1",
width: "9",
height: "9"
}, /* @__PURE__ */ import_react6.default.createElement("animate", {
id: "a",
begin: "0;b.end+0.15s",
attributeName: "x",
dur,
values: "1.5;.5;1.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "0;b.end+0.15s",
attributeName: "y",
dur,
values: "1.5;.5;1.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "0;b.end+0.15s",
attributeName: "width",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "0;b.end+0.15s",
attributeName: "height",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
})), /* @__PURE__ */ import_react6.default.createElement("rect", {
x: "13.5",
y: "1.5",
rx: "1",
width: "9",
height: "9"
}, /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "x",
dur,
values: "13.5;12.5;13.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "y",
dur,
values: "1.5;.5;1.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "width",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.15s",
attributeName: "height",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
})), /* @__PURE__ */ import_react6.default.createElement("rect", {
x: "13.5",
y: "13.5",
rx: "1",
width: "9",
height: "9"
}, /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "x",
dur,
values: "13.5;12.5;13.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "y",
dur,
values: "13.5;12.5;13.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "width",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "height",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
})), /* @__PURE__ */ import_react6.default.createElement("rect", {
x: "1.5",
y: "13.5",
rx: "1",
width: "9",
height: "9"
}, /* @__PURE__ */ import_react6.default.createElement("animate", {
id: "b",
begin: "a.begin+0.45s",
attributeName: "x",
dur,
values: "1.5;.5;1.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.45s",
attributeName: "y",
dur,
values: "13.5;12.5;13.5",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.45s",
attributeName: "width",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
}), /* @__PURE__ */ import_react6.default.createElement("animate", {
begin: "a.begin+0.45s",
attributeName: "height",
dur,
values: "9;11;9",
keyTimes: "0;.2;1"
})));
}
// src/components/BlocksShuffleThree.tsx
var import_react7 = __toESM(require("react"));
function BlocksShuffleThree({
width = 24,
height = 24,
dur = "0.2s",
color
}) {
return /* @__PURE__ */ import_react7.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react7.default.createElement("rect", {
x: "1",
y: "1",
rx: "1",
width: "10",
height: "10"
}, /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "a",
begin: "0;l.end",
attributeName: "x",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "d",
begin: "c.end",
attributeName: "y",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "g",
begin: "f.end",
attributeName: "x",
dur,
values: "13;1",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "j",
begin: "i.end",
attributeName: "y",
dur,
values: "13;1",
fill: "freeze"
})), /* @__PURE__ */ import_react7.default.createElement("rect", {
x: "1",
y: "13",
rx: "1",
width: "10",
height: "10"
}, /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "b",
begin: "a.end",
attributeName: "y",
dur,
values: "13;1",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "e",
begin: "d.end",
attributeName: "x",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "h",
begin: "g.end",
attributeName: "y",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "k",
begin: "j.end",
attributeName: "x",
dur,
values: "13;1",
fill: "freeze"
})), /* @__PURE__ */ import_react7.default.createElement("rect", {
x: "13",
y: "13",
rx: "1",
width: "10",
height: "10"
}, /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "c",
begin: "b.end",
attributeName: "x",
dur,
values: "13;1",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "f",
begin: "e.end",
attributeName: "y",
dur,
values: "13;1",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "i",
begin: "h.end",
attributeName: "x",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react7.default.createElement("animate", {
id: "l",
begin: "k.end",
attributeName: "y",
dur,
values: "1;13",
fill: "freeze"
})));
}
// src/components/BlocksShuffleTwo.tsx
var import_react8 = __toESM(require("react"));
function BlocksShuffleTwo({
width = 24,
height = 24,
dur = "0.2s",
color
}) {
return /* @__PURE__ */ import_react8.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react8.default.createElement("rect", {
x: "1",
y: "1",
rx: "1",
width: "10",
height: "10"
}, /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "a",
begin: "0;k.end",
attributeName: "x",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "d",
begin: "b.end",
attributeName: "y",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "g",
begin: "e.end",
attributeName: "x",
dur,
values: "13;1",
fill: "freeze"
}), /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "j",
begin: "h.end",
attributeName: "y",
dur,
values: "13;1",
fill: "freeze"
})), /* @__PURE__ */ import_react8.default.createElement("rect", {
x: "1",
y: "13",
rx: "1",
width: "10",
height: "10"
}, /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "b",
begin: "a.end",
attributeName: "y",
dur,
values: "13;1",
fill: "freeze"
}), /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "e",
begin: "d.end",
attributeName: "x",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "h",
begin: "g.end",
attributeName: "y",
dur,
values: "1;13",
fill: "freeze"
}), /* @__PURE__ */ import_react8.default.createElement("animate", {
id: "k",
begin: "j.end",
attributeName: "x",
dur,
values: "13;1",
fill: "freeze"
})));
}
// src/components/BlocksWave.tsx
var import_react9 = __toESM(require("react"));
function BlocksWave({
width = 24,
height = 24,
dur = "0.6s",
color
}) {
return /* @__PURE__ */ import_react9.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "1",
y: "1",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
id: "a",
begin: "0;b.end+0.2s",
attributeName: "x",
dur,
values: "1;4;1"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "0;b.end+0.2s",
attributeName: "y",
dur,
values: "1;4;1"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "0;b.end+0.2s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "0;b.end+0.2s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "8.33",
y: "1",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "x",
dur,
values: "8.33;11.33;8.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "y",
dur,
values: "1;4;1"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "1",
y: "8.33",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "x",
dur,
values: "1;4;1"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "y",
dur,
values: "8.33;11.33;8.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.1s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "15.66",
y: "1",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "x",
dur,
values: "15.66;18.66;15.66"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "y",
dur,
values: "1;4;1"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "8.33",
y: "8.33",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "x",
dur,
values: "8.33;11.33;8.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "y",
dur,
values: "8.33;11.33;8.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "1",
y: "15.66",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "x",
dur,
values: "1;4;1"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "y",
dur,
values: "15.66;18.66;15.66"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "15.66",
y: "8.33",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "x",
dur,
values: "15.66;18.66;15.66"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "y",
dur,
values: "8.33;11.33;8.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "8.33",
y: "15.66",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "x",
dur,
values: "8.33;11.33;8.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "y",
dur,
values: "15.66;18.66;15.66"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.3s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})), /* @__PURE__ */ import_react9.default.createElement("rect", {
x: "15.66",
y: "15.66",
width: "7.33",
height: "7.33"
}, /* @__PURE__ */ import_react9.default.createElement("animate", {
id: "b",
begin: "a.begin+0.4s",
attributeName: "x",
dur,
values: "15.66;18.66;15.66"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "y",
dur,
values: "15.66;18.66;15.66"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "width",
dur,
values: "7.33;1.33;7.33"
}), /* @__PURE__ */ import_react9.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "height",
dur,
values: "7.33;1.33;7.33"
})));
}
// src/components/BouncingBall.tsx
var import_react10 = __toESM(require("react"));
// src/util.ts
function stringDurationToFloat(dur) {
if (typeof dur === "string") {
if (dur.slice(-1).toLocaleLowerCase() === "s") {
return parseFloat(dur.slice(0, -1));
} else {
return parseFloat(dur);
}
} else {
return dur;
}
}
// src/components/BouncingBall.tsx
function BouncingBall({
width = 24,
height = 24,
dur = "0.375s",
color
}) {
return /* @__PURE__ */ import_react10.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react10.default.createElement("ellipse", {
cx: "12",
cy: "5",
rx: "4",
ry: "4"
}, /* @__PURE__ */ import_react10.default.createElement("animate", {
id: "f",
begin: "0;r.end",
attributeName: "cy",
calcMode: "spline",
dur,
values: "5;20",
keySplines: ".33,0,.66,.33",
fill: "freeze"
}), /* @__PURE__ */ import_react10.default.createElement("animate", {
id: "b",
begin: "f.end",
attributeName: "rx",
calcMode: "spline",
dur: stringDurationToFloat(dur) / 7.5,
values: "4;4.8;4",
keySplines: ".33,0,.66,.33;.33,.66,.66,1"
}), /* @__PURE__ */ import_react10.default.createElement("animate", {
begin: "f.end",
attributeName: "ry",
calcMode: "spline",
dur: stringDurationToFloat(dur) / 7.5,
values: "4;3;4",
keySplines: ".33,0,.66,.33;.33,.66,.66,1"
}), /* @__PURE__ */ import_react10.default.createElement("animate", {
begin: "f.end",
attributeName: "cy",
calcMode: "spline",
dur: stringDurationToFloat(dur) / 7.5,
values: "20;20.5;20",
keySplines: ".33,0,.66,.33;.33,.66,.66,1"
}), /* @__PURE__ */ import_react10.default.createElement("animate", {
id: "r",
begin: "b.end",
attributeName: "cy",
calcMode: "spline",
dur,
values: "20;5",
keySplines: ".33,.66,.66,1"
})));
}
// src/components/Clock.tsx
var import_react11 = __toESM(require("react"));
function Clock({
width = 24,
height = 24,
dur = "9s",
color
}) {
return /* @__PURE__ */ import_react11.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react11.default.createElement("path", {
d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
}), /* @__PURE__ */ import_react11.default.createElement("rect", {
x: "11",
y: "6",
rx: "1",
width: "2",
height: "7"
}, /* @__PURE__ */ import_react11.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})), /* @__PURE__ */ import_react11.default.createElement("rect", {
x: "11",
y: "11",
rx: "1",
width: "2",
height: "9"
}, /* @__PURE__ */ import_react11.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur: stringDurationToFloat(dur) / 12,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/DotRevolve.tsx
var import_react12 = __toESM(require("react"));
function DotRevolve({
width = 24,
height = 24,
dur = "0.75s",
color
}) {
return /* @__PURE__ */ import_react12.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react12.default.createElement("path", {
d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
opacity: ".25"
}), /* @__PURE__ */ import_react12.default.createElement("circle", {
cx: "12",
cy: "2.5",
r: "1.5"
}, /* @__PURE__ */ import_react12.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/Eclipse.tsx
var import_react13 = __toESM(require("react"));
function Eclipse({
width = 24,
height = 24,
dur = "0.6s",
color
}) {
return /* @__PURE__ */ import_react13.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react13.default.createElement("path", {
d: "M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"
}, /* @__PURE__ */ import_react13.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/EclipseHalf.tsx
var import_react14 = __toESM(require("react"));
function EclipseHalf({
width = 24,
height = 24,
dur = "0.6s",
color
}) {
return /* @__PURE__ */ import_react14.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react14.default.createElement("path", {
d: "M2,12A10.94,10.94,0,0,1,5,4.65c-.21-.19-.42-.36-.62-.55h0A11,11,0,0,0,12,23c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"
}, /* @__PURE__ */ import_react14.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/GooeyBallsOne.tsx
var import_react15 = __toESM(require("react"));
function GooeyBallsOne({
width = 24,
height = 24,
dur = "0.75s",
color
}) {
return /* @__PURE__ */ import_react15.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react15.default.createElement("defs", null, /* @__PURE__ */ import_react15.default.createElement("filter", {
id: "g"
}, /* @__PURE__ */ import_react15.default.createElement("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "1.5",
result: "b"
}), /* @__PURE__ */ import_react15.default.createElement("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"
}), /* @__PURE__ */ import_react15.default.createElement("feBlend", {
in: "SourceGraphic",
in2: "g"
}))), /* @__PURE__ */ import_react15.default.createElement("g", {
filter: "url(#g)"
}, /* @__PURE__ */ import_react15.default.createElement("circle", {
cx: "4",
cy: "12",
r: "3"
}, /* @__PURE__ */ import_react15.default.createElement("animate", {
attributeName: "cx",
calcMode: "spline",
dur,
values: "4;9;4",
keySplines: ".56,.52,.17,.98;.56,.52,.17,.98",
repeatCount: "indefinite"
}), /* @__PURE__ */ import_react15.default.createElement("animate", {
attributeName: "r",
calcMode: "spline",
dur,
values: "3;8;3",
keySplines: ".56,.52,.17,.98;.56,.52,.17,.98",
repeatCount: "indefinite"
})), /* @__PURE__ */ import_react15.default.createElement("circle", {
cx: "15",
cy: "12",
r: "8"
}, /* @__PURE__ */ import_react15.default.createElement("animate", {
attributeName: "cx",
calcMode: "spline",
dur,
values: "15;20;15",
keySplines: ".56,.52,.17,.98;.56,.52,.17,.98",
repeatCount: "indefinite"
}), /* @__PURE__ */ import_react15.default.createElement("animate", {
attributeName: "r",
calcMode: "spline",
dur,
values: "8;3;8",
keySplines: ".56,.52,.17,.98;.56,.52,.17,.98",
repeatCount: "indefinite"
}))));
}
// src/components/GooeyBallsTwo.tsx
var import_react16 = __toESM(require("react"));
function GooeyBallsTwo({
width = 24,
height = 24,
dur = "2s",
color
}) {
return /* @__PURE__ */ import_react16.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react16.default.createElement("defs", null, /* @__PURE__ */ import_react16.default.createElement("filter", {
id: "g"
}, /* @__PURE__ */ import_react16.default.createElement("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "1",
result: "b"
}), /* @__PURE__ */ import_react16.default.createElement("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"
}), /* @__PURE__ */ import_react16.default.createElement("feBlend", {
in: "SourceGraphic",
in2: "g"
}))), /* @__PURE__ */ import_react16.default.createElement("g", {
filter: "url(#g)"
}, /* @__PURE__ */ import_react16.default.createElement("circle", {
cx: "5",
cy: "12",
r: "4"
}, /* @__PURE__ */ import_react16.default.createElement("animate", {
attributeName: "cx",
calcMode: "spline",
dur,
values: "5;8;5",
keySplines: ".36,.62,.43,.99;.79,0,.58,.57",
repeatCount: "indefinite"
})), /* @__PURE__ */ import_react16.default.createElement("circle", {
cx: "19",
cy: "12",
r: "4"
}, /* @__PURE__ */ import_react16.default.createElement("animate", {
attributeName: "cx",
calcMode: "spline",
dur,
values: "19;16;19",
keySplines: ".36,.62,.43,.99;.79,0,.58,.57",
repeatCount: "indefinite"
})), /* @__PURE__ */ import_react16.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur: stringDurationToFloat(dur) / (3 / 4),
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/NinetyRing.tsx
var import_react17 = __toESM(require("react"));
function NinetyRing({
width = 24,
height = 24,
dur = "0.75s",
color
}) {
return /* @__PURE__ */ import_react17.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react17.default.createElement("path", {
d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
}, /* @__PURE__ */ import_react17.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/NinetyRingWithBg.tsx
var import_react18 = __toESM(require("react"));
function NinetyRingWithBg({
width = 24,
height = 24,
dur = "0.75s",
color
}) {
return /* @__PURE__ */ import_react18.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react18.default.createElement("path", {
d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
opacity: ".25"
}), /* @__PURE__ */ import_react18.default.createElement("path", {
d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
}, /* @__PURE__ */ import_react18.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/OneEightyRing.tsx
var import_react19 = __toESM(require("react"));
function OneEightyRing({
width = 24,
height = 24,
dur = "0.75",
color
}) {
return /* @__PURE__ */ import_react19.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react19.default.createElement("path", {
d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
}, /* @__PURE__ */ import_react19.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/OneEightyRingWithBg.tsx
var import_react20 = __toESM(require("react"));
function OneEightyRingWithBg({
width = 24,
height = 24,
dur = "0.75s",
color
}) {
return /* @__PURE__ */ import_react20.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react20.default.createElement("path", {
d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
opacity: ".25"
}), /* @__PURE__ */ import_react20.default.createElement("path", {
d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
}, /* @__PURE__ */ import_react20.default.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
dur,
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})));
}
// src/components/Pulse.tsx
var import_react21 = __toESM(require("react"));
function Pulse({
width = 24,
height = 24,
dur = "1.2s",
color
}) {
return /* @__PURE__ */ import_react21.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react21.default.createElement("circle", {
cx: "12",
cy: "12",
r: "0"
}, /* @__PURE__ */ import_react21.default.createElement("animate", {
attributeName: "r",
calcMode: "spline",
dur,
values: "0;11",
keySplines: ".52,.6,.25,.99",
repeatCount: "indefinite"
}), /* @__PURE__ */ import_react21.default.createElement("animate", {
attributeName: "opacity",
calcMode: "spline",
dur,
values: "1;0",
keySplines: ".52,.6,.25,.99",
repeatCount: "indefinite"
})));
}
// src/components/PulseMultiple.tsx
var import_react22 = __toESM(require("react"));
function PulseMultiple({
width = 24,
height = 24,
dur = "1.2s",
color
}) {
return /* @__PURE__ */ import_react22.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react22.default.createElement("circle", {
cx: "12",
cy: "12",
r: "0"
}, /* @__PURE__ */ import_react22.default.createElement("animate", {
id: "a",
begin: "0;c.end",
attributeName: "r",
calcMode: "spline",
dur,
values: "0;11",
keySplines: ".52,.6,.25,.99",
fill: "freeze"
}), /* @__PURE__ */ import_react22.default.createElement("animate", {
begin: "0;c.end",
attributeName: "opacity",
calcMode: "spline",
dur,
values: "1;0",
keySplines: ".52,.6,.25,.99",
fill: "freeze"
})), /* @__PURE__ */ import_react22.default.createElement("circle", {
cx: "12",
cy: "12",
r: "0"
}, /* @__PURE__ */ import_react22.default.createElement("animate", {
id: "b",
begin: "a.begin+0.2s",
attributeName: "r",
calcMode: "spline",
dur,
values: "0;11",
keySplines: ".52,.6,.25,.99",
fill: "freeze"
}), /* @__PURE__ */ import_react22.default.createElement("animate", {
begin: "a.begin+0.2s",
attributeName: "opacity",
calcMode: "spline",
dur,
values: "1;0",
keySplines: ".52,.6,.25,.99",
fill: "freeze"
})), /* @__PURE__ */ import_react22.default.createElement("circle", {
cx: "12",
cy: "12",
r: "0"
}, /* @__PURE__ */ import_react22.default.createElement("animate", {
id: "c",
begin: "a.begin+0.4s",
attributeName: "r",
calcMode: "spline",
dur,
values: "0;11",
keySplines: ".52,.6,.25,.99",
fill: "freeze"
}), /* @__PURE__ */ import_react22.default.createElement("animate", {
begin: "a.begin+0.4s",
attributeName: "opacity",
calcMode: "spline",
dur,
values: "1;0",
keySplines: ".52,.6,.25,.99",
fill: "freeze"
})));
}
// src/components/PulseRing.tsx
var import_react23 = __toESM(require("react"));
function PulseRing({
width = 24,
height = 24,
dur = "1.2s",
color
}) {
return /* @__PURE__ */ import_react23.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react23.default.createElement("path", {
d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z",
transform: "translate(12, 12) scale(0)"
}, /* @__PURE__ */ import_react23.default.createElement("animateTransform", {
attributeName: "transform",
calcMode: "spline",
type: "translate",
dur,
values: "12 12;0 0",
keySplines: ".52,.6,.25,.99",
repeatCount: "indefinite"
}), /* @__PURE__ */ import_react23.default.createElement("animateTransform", {
attributeName: "transform",
calcMode: "spline",
additive: "sum",
type: "scale",
dur,
values: "0;1",
keySplines: ".52,.6,.25,.99",
repeatCount: "indefinite"
}), /* @__PURE__ */ import_react23.default.createElement("animate", {
attributeName: "opacity",
calcMode: "spline",
dur,
values: "1;0",
keySplines: ".52,.6,.25,.99",
repeatCount: "indefinite"
})));
}
// src/components/PulseRingsMultiple.tsx
var import_react24 = __toESM(require("react"));
function PulseRingsMultiple({
width = 24,
height = 24,
dur = "1.2s",
color
}) {
return /* @__PURE__ */ import_react24.default.createElement("svg", {
width,
height,
fill: color,
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ import_react24.default.createElement("path", {
d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z",
transform: "translate(12, 12) scale(0)"
}, /* @__PURE__ */ import_react24.default.createElement("animateTransform", {
id: "a",
begin: "0;c.end",
attributeName: "transform",
calcMode: "spline",
type: "translate",
dur,
values: "12 12;0 0",
keySplines: ".52,.6,.25,.99"
}), /* @__PURE__ */ import_react24.default.createElement("animateTransform", {
begin: "0;c.end",
attributeName: "transform",
calcMode: "spline",
additive: "sum",
type: "scale",
dur,
values: "0;1",
keySplines: ".52,.6,.25,.99"
}), /* @__PURE__ */ import_react24.default.createElement("animate", {
begin: "0;c.end",
attributeName: "opacity",
calcMode: "spline",
dur,