Built with blockbuilder.org
Last active
July 4, 2016 18:53
-
-
Save sxywu/8d04f737afb434f1826a8e15e0919864 to your computer and use it in GitHub Desktop.
Personal Logo Iteration 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js'></script> | |
| <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'> | |
| <style> | |
| * { | |
| font-family: "Libre Baskerville"; | |
| text-align: center; | |
| color: rgb(240, 68, 114); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id='logo'></canvas> | |
| <h1> | |
| <div>Shirley</div> | |
| <div>Xueyang</div> | |
| <div>Wu</div> | |
| </h1> | |
| <script> | |
| var canvas = document.getElementById('logo'); | |
| // canvas.width = window.innerWidth; | |
| // canvas.height = window.innerHeight; | |
| canvas.width = 120; | |
| canvas.height = 250; | |
| var ctx = canvas.getContext('2d'); | |
| var padding = 40; | |
| // var size = (window.innerHeight - padding * 2) / 2; | |
| size = 100; | |
| var radius = size / 2; | |
| var cx = canvas.width / 2; | |
| var cy1 = padding + radius; | |
| var y = cy1 + radius * Math.sin(0.25 * Math.PI); | |
| var cy2 = y - radius * Math.sin(-0.25 * Math.PI); | |
| var start1 = 0.25; | |
| var start2 = -0.75; | |
| var end1 = 2; | |
| var end2 = 1; | |
| var yellow = [242, 242, 93]; | |
| var magenta = [240, 68, 114]; | |
| // draw fractals | |
| function drawFractals(times, startAngle, endAngle, cx, cy) { | |
| _.times(times, function(i) { | |
| var start = _.random(startAngle, endAngle); | |
| var end = start + _.random(0.25, 0.75); | |
| end = end > endAngle ? endAngle : end; | |
| var color = i % 2 ? yellow : magenta; | |
| var opacity = _.random(0.08, 0.2); | |
| ctx.fillStyle = 'rgba(' + color.join(',') + ',' + opacity + ')'; | |
| ctx.beginPath(); | |
| ctx.arc(cx, cy, radius, start * Math.PI, end * Math.PI); | |
| ctx.fill(); | |
| }); | |
| } | |
| drawFractals(24, start1, end1, cx, cy1); | |
| drawFractals(24, start2, end2, cx, cy2); | |
| // draw circles | |
| ctx.strokeStyle = ctx.fillStyle = 'rgb(' + magenta.join(',') + ')'; | |
| ctx.lineWidth = Math.floor(size / 10); | |
| ctx.lineCap = "round"; | |
| ctx.beginPath(); | |
| ctx.arc(cx, cy1, radius, start1 * Math.PI, end1 * Math.PI); | |
| ctx.stroke(); | |
| ctx.beginPath(); | |
| ctx.arc(cx, cy2, radius, start2 * Math.PI, end2 * Math.PI); | |
| ctx.stroke(); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment