LHC

Developer
Scott Niejadlik
Size
3,019 Kb
Views
42,504
  1. LHC Previews
  2. LHC HTML Codes
  3. LHC CSS Codes
  4. LHC JS Codes

How do I make an lhc?

Random generative circular patterns . What is a lhc? How do you make a lhc? This script and codes were developed by Scott Niejadlik on 07 September 2022, Wednesday.

LHC Previews
IQ Test

LHC - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LHC</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<section> <svg class="container" id="svgContainer"></svg>	<section>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

LHC - Script Codes CSS Codes

body {	background-color: #282828; height:100%
}
.container { width:100%; height:1000px; position:relative;
}

LHC - Script Codes JS Codes

var svg;	var dots;	var totalDots;	var docHeight;	var docWidth;	var counter;	function init()	{	svg = document.getElementsByTagName('svg')[0];	docHeight = $(document).height();	docWidth = $(document).width();	dots = [];	lines = [];	totalDots = 60;	var i = 0;	var limit = totalDots;	counter=0;	// CREATE DOTS STORE IN ARRAY, should be turned into an object	while(i<limit)	{	// TODO: create objects out of the dots.	var dot = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace	//Set path's data	dot.style.r = "2px"; //Set stroke width	dot.class = 'dot';	dot.id = "circle_"+i;	dot.style.fill = 'none';//url(#baseGrad)';	dot.setAttribute("r",Math.random()*20+i*10);	//dot.setAttribute("cx",Math.random()*350-175+(docWidth>>1));	//dot.setAttribute("cy",Math.random()*350-175+(docHeight>>1));	TweenMax.set(dot,{ x:(docWidth>>1),//Math.random()*50-25+(docWidth>>1), y:(docHeight>>1),//Math.random()*50-25+(docHeight>>1), //rotationY:i*15 });	//var randR = Math.floor(Math.random()*50)+205; //var randG = Math.floor(Math.random()*50)+205; //var randB = Math.floor(Math.random()*50)+205;	dot.style.stroke = '#'+Math.floor(Math.random()*16777215).toString(16); dot.setAttribute("stroke-dasharray", "10, "+100*Math.random()); dot.style.strokeWidth = 15;	dot.style.fill = 'none';//#'+Math.floor(Math.random()*16777215).toString(16);//'rgb('+randR+','+randG+','+randB+')';	svg.appendChild(dot);	dots[i] = dot;	++i;	}	//console.log(lines);	i = 0;	limit = totalDots;	while(i<limit)	{	//Begin Dots animation loop.	moveDot(i);	++i;	}	}	function moveDot(item)	{	var halfW = (docWidth>>1);	//console.log(halfW);	counter += 0.025;	var halfH = (docHeight>>1);	var dot = dots[item];	var size = dots[item].r.baseVal.value * 10;	var targetX = dots[item].cx.baseVal.value+Math.random()*10-5;//dots[item].cx.baseVal.value+Math.random()*size-(size>>1);	if(Math.abs(targetX - halfW) > halfW) targetX = halfW;	var targetY = dots[item].cy.baseVal.value+Math.random()*10-5;//dots[item].cy.baseVal.value+Math.random()*size-(size>>1);	var rIncrement = Math.random()*20+2;	var targetR = '+='+rIncrement;	var speed = rIncrement/100+0.3;	var targetOpacity = Math.random()*0.5+0.5;	if(Math.abs(targetY - halfH) > halfH) targetY = halfH;	if (dot.r.baseVal.value > Math.random()*50+300)	{	targetR = 500;	speed = targetR/100+0.3;	targetOpacity = 0;	}	if (dot.r.baseVal.value >= 500)	{	speed = 0;	targetR = 0;	targetOpacity = 1;	}	TweenMax.to(dot,speed,{attr:{'cx':targetX, 'cy':targetY, r:targetR},
//x: Math.sin(counter)*100+600,
//y: Math.cos(counter)*100+200,
//rotationX:Math.random()*360,
//rotationY:'+='+3,
//rotationZ:Math.random()*360,
opacity:targetOpacity,
onUpdate:onDotsMove, onUpdateParams:[item], onComplete:moveDot, onCompleteParams:[item], ease:Linear.easeNone});	}	function onDotsMove(item)	{ var dot = dots[item]; dot.setAttribute("stroke-dasharray", Math.random()*item+", "+1*item*Math.random());	}	function distance(x1,x2,y1,y2){	return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));	}	$( document ).ready(function() { init();	});
LHC - Script Codes
LHC - Script Codes
Home Page Home
Developer Scott Niejadlik
Username sniejadlik
Uploaded September 07, 2022
Rating 3
Size 3,019 Kb
Views 42,504
Do you need developer help for LHC?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Scott Niejadlik (sniejadlik) Script Codes
Name
Crystaline Chaos
WebGL Burst
Particle Motion trajectories
Chaotic Spheres
Planetary Migrations
HighCharts Evaluation Test
Light Curtains
Chaos Nebula
Lab
A Pen by Scott Niejadlik
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!