80 lines
1.2 KiB
JavaScript
80 lines
1.2 KiB
JavaScript
import React from "react";
|
|
|
|
function VoiceBars() {
|
|
return (
|
|
<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px", transition: "1s"}}>
|
|
<svg width="100vw" fill="none" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="#00B4DB" />
|
|
<stop offset="50%" stopColor="#224488" />
|
|
<stop offset="100%" stopColor="#0083B0" />
|
|
</linearGradient>
|
|
<path
|
|
fill="url(#grad1)"
|
|
d="
|
|
M0 67
|
|
C 273,183
|
|
822,-40
|
|
1920.00,106
|
|
|
|
V 359
|
|
H 0
|
|
V 67
|
|
Z">
|
|
<animate
|
|
repeatCount="indefinite"
|
|
fill="url(#grad1)"
|
|
attributeName="d"
|
|
dur="5s"
|
|
attributeType="XML"
|
|
values="
|
|
M0 77
|
|
C 473,283
|
|
822,-40
|
|
1920,116
|
|
|
|
V 359
|
|
H 0
|
|
V 67
|
|
Z;
|
|
|
|
M0 77
|
|
C 473,-40
|
|
1222,283
|
|
1920,136
|
|
|
|
V 359
|
|
H 0
|
|
V 67
|
|
Z;
|
|
|
|
M0 77
|
|
C 973,260
|
|
1722,-53
|
|
1920,120
|
|
|
|
V 359
|
|
H 0
|
|
V 67
|
|
Z;
|
|
|
|
M0 77
|
|
C 473,283
|
|
822,-40
|
|
1920,116
|
|
|
|
V 359
|
|
H 0
|
|
V 67
|
|
Z
|
|
">
|
|
</animate>
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VoiceBars;
|