## Pen Settings

### CSS

#### Vendor Prefixing

Any URL's 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 it's URL and the proper URL extention.

### 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

```              ```
<canvas id="c"></canvas>
```
```
!

## CSS

```              ```
@import "compass/css3";

@import "compass/reset";
@import "compass/css3";

body{
overflow: hidden;
}

canvas{
width: 100%;
height: 100%;
}
```
```
!

## JS

```              ```
// --------------------------

var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx    = canvas.getContext('2d');

width = window.innerWidth;
height = window.innerHeight;

canvas.width  = width;
canvas.height = height;

// ================

var Shape = function( ctx, x, y){
this.ctx = ctx;

this.x = x;
this.y = y;

this.circlrRawArr = [];

var maxRad = Math.min(width, height) / 2 * .9;

for(var i = 0; i < this.circlrRawNum; i++){
var theta = 2 * Math.PI * i / this.circlrRawNum;
this.circlrRawArr.push(circleRaw);
}
};

Shape.prototype = {
circlrRawArr : null,
circlrRawNum : 60,
update : function(){
this.ctx.save();
this.ctx.translate(this.x, this.y);

for(var i = 0; i < this.circlrRawNum; i++){
var circleRaw = this.circlrRawArr[i];
circleRaw.update();
}

this.ctx.restore();
}
};

this.ctx = ctx;

this.theta = theta;

this.circleArr = [];

for(var i = 0; i < this.rawNum; i++){
var rate = i / this.rawNum;

this.circleArr.push(circle);
}

this.count = theta;
}

CircleRaw.prototype = {
rate   : 0,
rawNum : 20,
count  : 0,
update : function(){
this.count += 0.04;

for( var i = 0; i < this.rawNum; i++){
var circle = this.circleArr[i];
circle.update(this.count);
}
}
}

this.ctx = ctx;

this.theta = theta;
};

Circle.prototype = {
col : '#fff',

update : function(count){
var rate = ( 1 + Math.sin(count))/2 * .8;
// var otherRate  = (1 + Math.cos(count * 2))/2;
// var otherRate2 = (1 + Math.sin(count * 4))/2;

var xPos = rad * Math.cos(this.theta);
var yPos = rad * Math.sin(this.theta);

var col = parseInt(100 + 155 * rate);

this.ctx.beginPath();
this.ctx.fillStyle = 'rgb( ' + col + ', ' + col + ', ' + col + ')';
this.ctx.arc( xPos, yPos, this.rad, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.closePath();
}
};

// ================
var shape;

init();
loop();

function init(){
shape = new Shape( ctx, width/2, height/2);

prevTime = +new Date;
}

function loop(){
var curTime = +new Date;
var duration = (curTime - prevTime)/1000;
prevTime = curTime;

ctx.fillStyle = '#333';
ctx.fillRect(0, 0, width, height);

shape.update();

requestAnimationFrame(loop);
}

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

```
```
!
999px
{"ft_lang_label":"__label__en","ft_lang_prob":0.698971,"math_prob":0.9221335,"size":6706,"snap":"2022-27-2022-33","text_gpt3_token_len":1670,"char_repetition_ratio":0.11653238,"word_repetition_ratio":0.13777372,"special_character_ratio":0.2790039,"punctuation_ratio":0.21639109,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9625605,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2022-06-27T15:18:03Z\",\"WARC-Record-ID\":\"<urn:uuid:4c9054f4-8af0-45ee-b6cb-66e6adf58abe>\",\"Content-Length\":\"107617\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:cf76a3cf-dfe3-4aae-83d9-dbea6673a11c>\",\"WARC-Concurrent-To\":\"<urn:uuid:968263b0-5780-46d1-96ec-1fc8963c5e53>\",\"WARC-IP-Address\":\"104.16.176.44\",\"WARC-Target-URI\":\"https://codepen.io/kenjiSpecial/pen/gOWjep\",\"WARC-Payload-Digest\":\"sha1:FA53DAYZCQSUTXJRMGZJ2ONCUMND6IAI\",\"WARC-Block-Digest\":\"sha1:W3NEYOKU2IANQGNWI5VGWLIFFFHAK6L7\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2022/CC-MAIN-2022-27/CC-MAIN-2022-27_segments_1656103334753.21_warc_CC-MAIN-20220627134424-20220627164424-00078.warc.gz\"}"}