discord login page

discord-login-page.markdown

discord login page

A Pen by Mark on CodePen.

License.

index.html

<section>
	<canvas id='canvas'></canvas>
	<form>
		<h3>С возвращением!</h3>
		<p>Мы так рады видеть Вас снова!</p>
		<div class="label">E-MAIL</div>
		<input type="text" name="email">
		<div class="label">ПАРОЛЬ</div>
		<input type="password" name="password">
		<button>Вход</button>
	</form>
</section>

script.js

const BG_IMAGE_URL = 'https://cutewallpaper.org/21/discord-backrounds/Discord-Server-Free-Wallpaper-and-Backgrounds-Larutadelsorigens.png'
const BG_COLOR = '#36393f'
const POINTS_AMOUNT = 1000
const WIDTH = 1280
const HEIGHT = 720
const RADIUS = 730
const image = new Image()
let canvas,
		ctx,
		simplex,
		points = [],
		dots = [],
		time = 0,
		dotsMoveCoef = 0
		

window.onload = function init() {
	canvas = document.querySelector('#canvas')
	canvas.width = WIDTH
	canvas.height = HEIGHT
	ctx = canvas.getContext('2d')
	ctx.shadowColor = 'black'
	ctx.shadowBlur = 10
	simplex = new SimplexNoise('noise1')
	
	image.src = BG_IMAGE_URL
	
	document.querySelector('form').addEventListener('submit', e => e.preventDefault())
	
  this.addEventListener('mousemove', (e) => {
    const halfX = window.innerWidth / 2
		dotsMoveCoef = (e.clientX - halfX) / 100
  })
	
  createPoints()
	createDots()
  animate()
	
	function createPoints() {
    for (let i = 0; i < POINTS_AMOUNT; i++) {
        const point = {
            x: + Math.cos(i / POINTS_AMOUNT * Math.PI * 2),
            y: Math.sin(i / POINTS_AMOUNT * Math.PI * 2)
        }
        point._x = point.x
        point._y = point.y

        points.push(point)
    }
	}

	function createDots(){
		for (let i = 0; i < 20; i++){
			dots.push(new Dot())		
		}
	}
}

function animate() {
    render()
    update()
    requestAnimationFrame(animate)

    function render() {
      ctx.clearRect(0, 0, WIDTH, HEIGHT);
      ctx.drawImage(image, 0, 0, WIDTH, HEIGHT)
      ctx.fillStyle = BG_COLOR
      ctx.lineCap = 'round';
      drawShape()
			drawDots()
			
			function drawShape(){
				ctx.beginPath()
        ctx.moveTo(points[0].x, points[0].y)
        for (let i = 1; i < points.length; i++) {
            ctx.lineTo(points[i].x, points[i].y)
        }
        ctx.closePath()
        ctx.fill()
				ctx.clip()
			}
			
			function drawDots(){
				dots.forEach(dot => {
					ctx.beginPath()
					ctx.arc(dot.x, dot.y, dot.radius, 2 * Math.PI, false)
					ctx.fillStyle = dot.color
					ctx.fill()
				})
			}
    }

    function update() {
			updatePoints()
      updateDots()
			
			function updatePoints(){
				const coef = 3.2
				points.forEach(point => {
					let noise = simplex.noise2D(point._x * coef + time, point._y * coef + time) * 20
            point.x = point._x * RADIUS + noise
            point.y = point._y * RADIUS + noise
				})
        time += .001
			}
			
			function updateDots(){
				dots.forEach(dot => {
					dot.update()
				})
			}
		}
}

function Dot(){
	const x = Math.random() * RADIUS
	
	return {
		radius: Math.round(Math.random() * 4),
		color: '#fff',
		x: x + dotsMoveCoef,
		_x: x,
		y: Math.random() * HEIGHT,
		speed: -Math.random() * .5,
		update: function(){
			this.y += this.speed
			
			if(this.y + this.radius < 0){
				this.y = HEIGHT + 50
			}
			
			const delta = this.x - (this._x + dotsMoveCoef)
			console.log(delta)
			if (Math.abs(delta) / 4 > 1){
				this.x += delta > 0 ? .1 : -.1
			} else {
				this.x = this._x + dotsMoveCoef
			}
		}
	}
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>

style.sass

$width: 1280px
$height: 720px
$bgColor: #36393f

*
	box-sizing: border-box

html, 
body
	width: 100%
	height: 100%

body
	margin: 0
	display: flex
	justify-content: center
	align-items: center
	
	section
		position: relative
		width: $width
		height: $height
		box-shadow: 0 0 20px 2px rgba(0,0,0,.15)
		display: flex
		justify-content: center
		align-items: center
		
		canvas
			position: absolute
			top: 0
			left: 0
	
		form
			position: relative
			display: block
			width: 480px
			height: 424px
			background: #36393f
			padding: 40px
			border-radius: 5px
			box-shadow: 0 2px 10px 0 rgba(0,0,0,.2)
			font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif
			
			h3
				font-size: 26px
				font-weight: 300
				text-align: center
				color: whitesmoke
			
			p
				font-size: 16px
				color: #72767d
				text-align: center
			
			.label
				position: relative
				font-size: 10px
				margin-top: 16px
				color: #8e9297
				font-weight: bold
		
			input
				position: relative
				width: 100%
				height: 40px
				margin-top: 10px
				color: #dcddde
				border: 1px solid rgba(0,0,0,.3)
				padding: 10px
				border-radius: 3px
				outline: none
				background: rgba(0,0,0,.1)
				&:focus
					border-color: #7289da
			
			button
				width: 100%
				height: 44px
				margin-top: 40px
				font-size: 16px
				font-weight: bold
				background: #7289da
				outline: none
				border: none
				border-radius: 3px
				color: white
				cursor: pointer
				-webkit-appearance: button