## Pen Settings

### CSS

#### Vendor Prefixing

Any URLs added here will be added as `<link>`s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

### JavaScript

#### JavaScript Preprocessor

Babel includes JSX processing.

Any URL's added here will be added as `<script>`s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

### Packages

Search for and use JavaScript packages from npm here. By selecting a package, an `import` statement will be added to the top of the JavaScript editor for this package.

### Behavior

#### Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

#### Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

#### Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

## HTML

```              ```
#bg
```
```
!

## CSS

```              ```
\$colors: (
#feda3e,
#cc6698,
#ff8300,
#7A86b8,
#f05133,
#2aa9e0,
#71bf45,
#ef0e39,
#9e79d7,
);
\$color: nth(\$colors, random(length(\$colors)));

html {
overflow: hidden;
}
```
```
!

## JS

```              ```
var refreshDuration = 10000;
var refreshTimeout;
var numPointsX;
var numPointsY;
var unitWidth;
var unitHeight;
var points;

{
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width',window.innerWidth);
svg.setAttribute('height',window.innerHeight);
document.querySelector('#bg').appendChild(svg);

var unitSize = (window.innerWidth+window.innerHeight)/20;
numPointsX = Math.ceil(window.innerWidth/unitSize)+1;
numPointsY = Math.ceil(window.innerHeight/unitSize)+1;
unitWidth = Math.ceil(window.innerWidth/(numPointsX-1));
unitHeight = Math.ceil(window.innerHeight/(numPointsY-1));

points = [];

for(var y = 0; y < numPointsY; y++) {
for(var x = 0; x < numPointsX; x++) {
points.push({x:unitWidth*x, y:unitHeight*y, originX:unitWidth*x, originY:unitHeight*y});
}
}

randomize();

for(var i = 0; i < points.length; i++) {
if(points[i].originX != unitWidth*(numPointsX-1) && points[i].originY != unitHeight*(numPointsY-1)) {
var topLeftX = points[i].x;
var topLeftY = points[i].y;
var topRightX = points[i+1].x;
var topRightY = points[i+1].y;
var bottomLeftX = points[i+numPointsX].x;
var bottomLeftY = points[i+numPointsX].y;
var bottomRightX = points[i+numPointsX+1].x;
var bottomRightY = points[i+numPointsX+1].y;

var rando = Math.floor(Math.random()*2);

for(var n = 0; n < 2; n++) {
var polygon = document.createElementNS(svg.namespaceURI, 'polygon');

if(rando==0) {
if(n==0) {
polygon.point1 = i;
polygon.point2 = i+numPointsX;
polygon.point3 = i+numPointsX+1;
polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+bottomRightX+','+bottomRightY);
} else if(n==1) {
polygon.point1 = i;
polygon.point2 = i+1;
polygon.point3 = i+numPointsX+1;
polygon.setAttribute('points',topLeftX+','+topLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
}
} else if(rando==1) {
if(n==0) {
polygon.point1 = i;
polygon.point2 = i+numPointsX;
polygon.point3 = i+1;
polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY);
} else if(n==1) {
polygon.point1 = i+numPointsX;
polygon.point2 = i+1;
polygon.point3 = i+numPointsX+1;
polygon.setAttribute('points',bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
}
}
polygon.setAttribute('fill','rgba(0,0,0,'+(Math.random()/3)+')');
var animate = document.createElementNS('http://www.w3.org/2000/svg','animate');
animate.setAttribute('fill','freeze');
animate.setAttribute('attributeName','points');
animate.setAttribute('dur',refreshDuration+'ms');
animate.setAttribute('calcMode','linear');
polygon.appendChild(animate);
svg.appendChild(polygon);
}
}
}

refresh();

}

function randomize() {
for(var i = 0; i < points.length; i++) {
if(points[i].originX != 0 && points[i].originX != unitWidth*(numPointsX-1)) {
points[i].x = points[i].originX + Math.random()*unitWidth-unitWidth/2;
}
if(points[i].originY != 0 && points[i].originY != unitHeight*(numPointsY-1)) {
points[i].y = points[i].originY + Math.random()*unitHeight-unitHeight/2;
}
}
}

function refresh() {
randomize();
for(var i = 0; i < document.querySelector('#bg svg').childNodes.length; i++) {
var polygon = document.querySelector('#bg svg').childNodes[i];
var animate = polygon.childNodes;
if(animate.getAttribute('to')) {
animate.setAttribute('from',animate.getAttribute('to'));
}
animate.setAttribute('to',points[polygon.point1].x+','+points[polygon.point1].y+' '+points[polygon.point2].x+','+points[polygon.point2].y+' '+points[polygon.point3].x+','+points[polygon.point3].y);
animate.beginElement();
}
refreshTimeout = setTimeout(function() {refresh();}, refreshDuration);
}

function onResize() {
document.querySelector('#bg svg').remove();
clearTimeout(refreshTimeout);
{"ft_lang_label":"__label__en","ft_lang_prob":0.6088956,"math_prob":0.98927766,"size":7880,"snap":"2022-40-2023-06","text_gpt3_token_len":2034,"char_repetition_ratio":0.13776028,"word_repetition_ratio":0.15929204,"special_character_ratio":0.26840103,"punctuation_ratio":0.20791458,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.964316,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2023-02-05T18:53:11Z\",\"WARC-Record-ID\":\"<urn:uuid:9020af2c-4976-4bf0-af8f-614305c2815b>\",\"Content-Length\":\"112669\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:496135d6-1fa7-4e61-bfc0-b8d0a73147c8>\",\"WARC-Concurrent-To\":\"<urn:uuid:fb200705-08cd-4acb-9dab-c0d8597b8f50>\",\"WARC-IP-Address\":\"104.17.14.48\",\"WARC-Target-URI\":\"https://codepen.io/zessx/pen/ZGBMXZ?utm_source=bypeople\",\"WARC-Payload-Digest\":\"sha1:CUHGRHMC3PAUQBOXHK4YFV4RU2ZVRY3N\",\"WARC-Block-Digest\":\"sha1:6FEX4MU7O6SLC55GG5JSLERZJNIO5CJW\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2023/CC-MAIN-2023-06/CC-MAIN-2023-06_segments_1674764500273.30_warc_CC-MAIN-20230205161658-20230205191658-00481.warc.gz\"}"}