#app
View Compiled
*
box-sizing border-box
body
display grid
place-items center
min-height 100vh
overflow hidden
canvas
position fixed
inset 0
background hsl(0, 0%, 15%)
z-index -1
height 100vh
width 100vw
View Compiled
import React from 'https://cdn.skypack.dev/react'
import ReactDOM from 'https://cdn.skypack.dev/react-dom'
import gsap from 'https://cdn.skypack.dev/gsap'
const ROOT_NODE = document.querySelector('#app')
const Starscape = () => {
const canvasRef = React.useRef(null)
const contextRef = React.useRef(null)
React.useEffect(() => {
canvasRef.current.width = window.innerWidth
canvasRef.current.height = window.innerHeight
contextRef.current = canvasRef.current.getContext('2d')
contextRef.current.fillStyle = 'yellow'
contextRef.current.beginPath()
contextRef.current.arc(window.innerWidth / 2, window.innerHeight / 2, 100, 0, Math.PI * 2)
contextRef.current.fill()
}, [])
return <canvas ref={canvasRef} />
}
const App = () => <Starscape/>
ReactDOM.render(<App/>, ROOT_NODE)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.