Shapes in cricles

Developer
Matthias Dittgen
Size
2,368 Kb
Views
34,408
  1. Shapes in cricles Previews
  2. Shapes in cricles HTML Codes
  3. Shapes in cricles CSS Codes
  4. Shapes in cricles JS Codes

How do I make an shapes in cricles?

Triangle, quadrat, pentagon, hexagon. What is a shapes in cricles? How do you make a shapes in cricles? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.

Shapes in cricles Previews
IQ Test

Shapes in cricles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shapes in cricles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="space"></canvas>
<div id="info"> <h1>Shapes in circles</h1> <p>triangle, quadrat, pentagon, hexagon</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.0/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shapes in cricles - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0;
}
body{ position: relative; background-color: #333333;
}
#info { position: absolute; top: 0px; left: 0px; margin: 12px 0 0 12px;
}
h1 { color: #eeeeee; font-size: 21px; font-weight: normal; margin: 0;
}
p, a { margin: 3px 0 0 0; color: #cccccc; font-size: 13px;
}

Shapes in cricles - Script Codes JS Codes

var main = (function () { var canvas, ctx; var deg360 = Math.PI*2; var poc = function (x, y, r, a) { return { x: x + r * Math.cos(a * deg360), y: y + r * Math.sin(a * deg360)}; }; var createPoints = function (x, y, r, segments, offset) { return _.times(segments+1, function (index) { return poc(x, y, r, index/segments + offset); }); }; var drawPoints = function (points,a) { ctx.beginPath(); _.forEach(points, function (item, index) { var f = (index==0?ctx.moveTo:ctx.lineTo); f.apply(ctx, [item.x, item.y]); }); ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(240,200,40,'+a+')'; ctx.stroke(); }; var c = 0; var loop = function () { drawPoints(createPoints(100, 150, 80, 3, c), c); drawPoints(createPoints(300, 150, 80, 4, c), c); drawPoints(createPoints(100, 350, 80, 5, c), c); drawPoints(createPoints(300, 350, 80, 6, c), c); c += 0.05; if (c<1) setTimeout(arguments.callee, 1000/10); }; var start = function () { canvas = document.getElementById('space'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext('2d'); loop(); }; // domReady if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); setTimeout(start, 0); }, false ); }
})();
Shapes in cricles - Script Codes
Shapes in cricles - Script Codes
Home Page Home
Developer Matthias Dittgen
Username matths
Uploaded August 26, 2022
Rating 3
Size 2,368 Kb
Views 34,408
Do you need developer help for Shapes in cricles?

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!

Matthias Dittgen (matths) Script Codes
Name
Timebox
Additive color mix with triangles
Text-shadow spiral
Draw a line coord
Additive color mixing
1x1 trainer
Animating non-CSS property
Text-shadow fireworks
WIP
Moving lines illusion while scrolling
Create amazing video scripts 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!