react-surfaces
Version:
A collection of animated background gradients
607 lines (586 loc) • 19.5 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var propTypes = _interopDefault(require('prop-types'));
var Variant1 = React.memo(function (_ref) {
var color1 = _ref.color1,
color2 = _ref.color2,
transitionDuration = _ref.transitionDuration,
transitionTimingFunction = _ref.transitionTimingFunction,
transitionDelay = _ref.transitionDelay,
title = _ref.title;
var transition = {
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay,
transitionProperty: 'stop-color'
};
return /*#__PURE__*/React__default.createElement("svg", {
height: "100%",
width: "100%",
id: "Laag_1",
preserveAspectRatio: "xMidYMid slice",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 100 199.93"
}, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant1-gradient1",
x1: "127.93",
y1: "132",
x2: "-95.89",
y2: "39.91",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color1
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color2
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant1-gradient2",
y1: "17.07",
x2: "99.49",
y2: "17.07",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color1
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1,
stopOpacity: "0"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant1-gradient3",
y1: "183.87",
x2: "100",
y2: "183.87",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color2,
stopOpacity: "0"
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1
}))), /*#__PURE__*/React__default.createElement("title", null, title || 'react-surfaces variant 1'), /*#__PURE__*/React__default.createElement("rect", {
width: "100",
height: "199.87",
style: {
fill: 'url(#variant1-gradient1)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M99.49.07C57.34,77.3,28.6-3.67,0,14V.07Z",
transform: "translate(0 -0.07)",
style: {
fill: 'url(#variant1-gradient2)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M100,168.72V200H0V172.58c8.32-3.61,27.38,12.64,39.53,14.13C71.61,190.63,77.42,162.16,100,168.72Z",
transform: "translate(0 -0.07)",
style: {
fill: 'url(#variant1-gradient3)'
}
}));
});
var Variant2 = React.memo(function (_ref) {
var color1 = _ref.color1,
color2 = _ref.color2,
transitionDuration = _ref.transitionDuration,
transitionTimingFunction = _ref.transitionTimingFunction,
transitionDelay = _ref.transitionDelay,
title = _ref.title;
var transition = {
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay,
transitionProperty: 'stop-color'
};
return /*#__PURE__*/React__default.createElement("svg", {
height: "100%",
width: "100%",
id: "Laag_1",
preserveAspectRatio: "xMidYMid slice",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 100 100"
}, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant2-gradient1",
x1: "110.35",
y1: "74.83",
x2: "-62.99",
y2: "3.51",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
offset: "0",
style: transition,
stopColor: color1
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
style: transition,
stopColor: color2
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant2-gradient2",
y1: "6.43",
x2: "51.3",
y2: "6.43",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
offset: "0",
style: transition,
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
style: transition,
stopColor: color2,
stopOpacity: "0"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant2-gradient3",
y1: "83.41",
x2: "100",
y2: "83.41",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
offset: "0",
style: transition,
stopColor: color1,
stopOpacity: "0"
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
style: transition,
stopColor: color1
}))), /*#__PURE__*/React__default.createElement("title", null, title || 'react-surfaces variant 2'), /*#__PURE__*/React__default.createElement("rect", {
width: "100",
height: "100",
style: {
fill: 'url(#variant2-gradient1)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M51.3,0C42.19,19.77,11,11.79,0,8.27V0Z",
style: {
fill: 'url(#variant2-gradient2)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M100,99.9v.1H0V72.58C8.32,69,23.78,63.8,34.81,69.09,49,75.91,63.42,90.9,100,99.9Z",
style: {
fill: 'url(#variant2-gradient3)'
}
}));
});
var Variant3 = React.memo(function (_ref) {
var color1 = _ref.color1,
color2 = _ref.color2,
transitionDuration = _ref.transitionDuration,
transitionTimingFunction = _ref.transitionTimingFunction,
transitionDelay = _ref.transitionDelay,
title = _ref.title;
var transition = {
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay,
transitionProperty: 'stop-color'
};
return /*#__PURE__*/React__default.createElement("svg", {
height: "100%",
width: "100%",
preserveAspectRatio: "xMidYMid slice",
id: "Laag_1",
"data-name": "Laag 1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 100 100"
}, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant3-gradient1",
x1: "110.35",
y1: "74.83",
x2: "-62.99",
y2: "3.51",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant3-gradient2",
y1: "12.1",
x2: "99.49",
y2: "12.1",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1,
stopOpacity: "0"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant3-gradient3",
y1: "74.35",
x2: "100",
y2: "74.35",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color1,
stopOpacity: "0"
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1
}))), /*#__PURE__*/React__default.createElement("title", null, title || 'react-surfaces variant 3'), /*#__PURE__*/React__default.createElement("rect", {
width: "100",
height: "100",
style: {
fill: 'url(#variant3-gradient1)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M99.49,0C90.38,19.77,101.11,35.28,0,13.94V0Z",
style: {
fill: 'url(#variant3-gradient2)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M100,99.9v.1H0V72.58C8.32,69,39,44.15,50,49.44,64.2,56.26,63.42,90.9,100,99.9Z",
style: {
fill: 'url(#variant3-gradient3)'
}
}));
});
var Variant4 = React.memo(function (_ref) {
var color1 = _ref.color1,
color2 = _ref.color2,
transitionDuration = _ref.transitionDuration,
transitionTimingFunction = _ref.transitionTimingFunction,
transitionDelay = _ref.transitionDelay,
title = _ref.title;
var transition = {
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay,
transitionProperty: 'stop-color'
};
return /*#__PURE__*/React__default.createElement("svg", {
height: "100%",
width: "100%",
preserveAspectRatio: "xMidYMid slice",
id: "Laag_1",
"data-name": "Laag 1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 100 100"
}, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant4-gradient3",
x1: "110.35",
y1: "74.83",
x2: "-62.99",
y2: "3.51",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant4-gradient2",
y1: "6.97",
x2: "99.49",
y2: "6.97",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color2,
stopOpacity: "0"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant4-gradient1",
y1: "79.95",
x2: "100",
y2: "79.95",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color1,
stopOpacity: "0"
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1
}))), /*#__PURE__*/React__default.createElement("title", null, title || 'react-surfaces variant 4'), /*#__PURE__*/React__default.createElement("rect", {
width: "100",
height: "100",
style: {
fill: 'url(#variant4-gradient3)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M99.49,0C90.38,19.77,28.6-3.74,0,13.94V0Z",
style: {
fill: 'url(#variant4-gradient2)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M100,99.9v.1H0V72.58c8.32-3.61,12.29-14,24.43-12.53C56.52,64,44.89,77,100,99.9Z",
style: {
fill: 'url(#variant4-gradient1)'
}
}));
});
var Variant5 = React.memo(function (_ref) {
var color1 = _ref.color1,
color2 = _ref.color2,
transitionDuration = _ref.transitionDuration,
transitionTimingFunction = _ref.transitionTimingFunction,
transitionDelay = _ref.transitionDelay,
title = _ref.title;
var transition = {
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay,
transitionProperty: 'stop-color'
};
return /*#__PURE__*/React__default.createElement("svg", {
height: "100%",
width: "100%",
preserveAspectRatio: "xMidYMid slice",
id: "Laag_1",
"data-name": "Laag 1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 100 100"
}, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant5-gradient1",
x1: "110.35",
y1: "74.83",
x2: "-62.99",
y2: "3.51",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant5-gradient2",
y1: "17.01",
x2: "99.49",
y2: "17.01",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color2,
stopOpacity: "0"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant5-gradient3",
y1: "83.87",
x2: "100",
y2: "83.87",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "0",
stopColor: color1,
stopOpacity: "0"
}), /*#__PURE__*/React__default.createElement("stop", {
style: transition,
offset: "1",
stopColor: color1
}))), /*#__PURE__*/React__default.createElement("title", null, title || 'react-surfaces variant 5'), /*#__PURE__*/React__default.createElement("rect", {
width: "100",
height: "100",
style: {
fill: 'url(#variant5-gradient1)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M99.49,0C57.34,77.23,28.6-3.74,0,13.94V0Z",
style: {
fill: 'url(#variant5-gradient2)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M100,68.72V100H0V72.58C8.32,69,27.38,85.22,39.53,86.71,71.61,90.63,77.42,62.16,100,68.72Z",
style: {
fill: 'url(#variant5-gradient3)'
}
}));
});
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var Variant6 = React.memo(function (_ref) {
var color1 = _ref.color1,
color2 = _ref.color2,
transitionDuration = _ref.transitionDuration,
transitionTimingFunction = _ref.transitionTimingFunction,
transitionDelay = _ref.transitionDelay,
title = _ref.title;
var transition = {
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay,
transitionProperty: 'stop-color'
};
return /*#__PURE__*/React__default.createElement("svg", {
height: "100%",
width: "100%",
preserveAspectRatio: "xMidYMid slice",
id: "Laag_1",
"data-name": "Laag 1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 100 100"
}, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
id: "variant6-gradient1",
x1: "110.35",
y1: "74.83",
x2: "-62.99",
y2: "3.51",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
offset: "0",
style: transition,
stopColor: color2
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
style: transition,
stopColor: color1
}))), /*#__PURE__*/React__default.createElement("title", null, title || 'react-surfaces variant 6'), /*#__PURE__*/React__default.createElement("rect", {
width: "100",
height: "100",
style: {
fill: 'url(#variant6-gradient1)'
}
}), /*#__PURE__*/React__default.createElement("path", {
d: "M99.49,0C57.34,77.23,28.6-3.74,0,13.94V0Z",
style: _extends({}, transition, {
transitionProperty: 'fill',
fill: color2
})
}), /*#__PURE__*/React__default.createElement("path", {
d: "M100,68.72V100H0V72.58C8.32,69,27.38,85.22,39.53,86.71,71.61,90.63,77.42,62.16,100,68.72Z",
style: _extends({}, transition, {
transitionProperty: 'fill',
fill: color1
})
}));
});
var DefaultComponent = function DefaultComponent(_ref) {
var variant = _ref.variant,
color1 = _ref.color1,
color2 = _ref.color2,
transitionDuration = _ref.transitionDuration,
transitionTimingFunction = _ref.transitionTimingFunction,
transitionDelay = _ref.transitionDelay;
switch (+variant) {
case 2:
{
return /*#__PURE__*/React__default.createElement(Variant2, {
color1: color1,
color2: color2,
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay
});
}
case 3:
{
return /*#__PURE__*/React__default.createElement(Variant3, {
color1: color1,
color2: color2,
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay
});
}
case 4:
{
return /*#__PURE__*/React__default.createElement(Variant4, {
color1: color1,
color2: color2,
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay
});
}
case 5:
{
return /*#__PURE__*/React__default.createElement(Variant5, {
color1: color1,
color2: color2,
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay
});
}
case 6:
{
return /*#__PURE__*/React__default.createElement(Variant6, {
color1: color1,
color2: color2,
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay
});
}
default:
return /*#__PURE__*/React__default.createElement(Variant1, {
color1: color1,
color2: color2,
transitionDuration: transitionDuration,
transitionTimingFunction: transitionTimingFunction,
transitionDelay: transitionDelay
});
}
};
DefaultComponent.propTypes = {
variant: propTypes.number.isRequired,
color1: propTypes.string.isRequired,
color2: propTypes.string.isRequired,
transitionDelay: propTypes.string.isRequired,
transitionTimingFunction: propTypes.string.isRequired,
transitionDuration: propTypes.string.isRequired
};
DefaultComponent.defaultProps = {
variant: 1,
color1: '#e52421',
color2: '#2a4b9b',
transitionDelay: '0s',
transitionTimingFunction: 'ease',
transitionDuration: '2s'
};
module.exports = DefaultComponent;
//# sourceMappingURL=index.js.map