import React from "react" import { animated, useSprings, interpolate } from "react-spring" import "./homeBackground.css" const spotsArray = [ { width: "50px", height: "50px", backgroundColor: `rgba(250, 249, 246, .5)`, borderRadius: "50%", }, { width: "20px", height: "20px", backgroundColor: `rgba(250, 249, 246, .5)`, borderRadius: "50%", }, { width: "80px", height: "80px", backgroundColor: `rgba(250, 249, 246, .5)`, borderRadius: "50%", }, { width: "20px", height: "20px", backgroundColor: `rgba(60, 40, 41, 0.8)`, borderRadius: "50%", }, { width: "80px", height: "80px", backgroundColor: `rgba(60, 40, 41, 0.2)`, borderRadius: "50%", }, { width: "50px", height: "50px", backgroundColor: `rgba(60, 40, 41, 0.35)`, borderRadius: "50%", }, { width: "80px", height: "80px", backgroundColor: `rgba(60, 40, 41, 0.35)`, borderRadius: "50%", }, { width: "50px", height: "50px", backgroundColor: `rgba(60, 40, 41, 0.35)`, borderRadius: "50%", }, { width: "20px", height: "20px", backgroundColor: `rgba(60, 40, 41, 0.35)`, borderRadius: "50%", }, { width: "20px", height: "20px", backgroundColor: `rgba(60, 40, 41, 0.8)`, borderRadius: "50%", }, { width: "30px", height: "30px", backgroundColor: `rgba(60, 40, 41, 0.35)`, borderRadius: "50%", }, { width: "50px", height: "50px", backgroundColor: `rgba(60, 40, 41, 0.8)`, borderRadius: "50%", }, { width: "20px", height: "20px", backgroundColor: `rgba(60, 40, 41, 0.8)`, borderRadius: "50%", }, ] const from = () => ({ x: Math.random() * 900, y: Math.random() * 600, }) const to = () => ({ x: Math.random() * 800, y: Math.random() * 600, }) const HomeBackground = () => { const [props] = useSprings(spotsArray.length, () => ({ ...to(), from: from(), config: { duration: "70000", friction: "300", }, })) return ( <div className="home-background"> <div className="triangle-wrapper"> <svg width="1024px" height="380px" viewBox="0 0 1024 380" version="1.1" xmlns="http://www.w3.org/2000/svg" className="home-background-triangle" > <defs> <linearGradient x1="50%" y1="56.2263569%" x2="50%" y2="100%" id="linearGradient-1" > <stop stopColor="#F26071" offset="0%"></stop> <stop stopColor="#DF5A63" stopOpacity="0.4" offset="100%"></stop> </linearGradient> </defs> <g id="Home-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" fillOpacity="0.8" > <g id="Ladybug-Podcast-Home-Page" fill="url(#linearGradient-1)"> <g id="player"> <polygon id="Rectangle" points="410 0 1024 380 -5.68434189e-13 380" ></polygon> </g> </g> </g> </svg> {props.map(({ x, y }, i) => { let { width, height, backgroundColor, borderRadius } = spotsArray[i] return ( <animated.div key={i} className="spot" style={{ transform: interpolate( [x, y], (x, y) => `translate3d(${x}px,${y}px,0)` ), backgroundColor: backgroundColor, width: width, height: height, borderRadius: borderRadius, }} /> ) })} </div> </div> ) } export default HomeBackground