Skip to content

Instantly share code, notes, and snippets.

@AdmiralPotato

AdmiralPotato/README.md

Last active April 27, 2017 00:58
Show Gist options
  • Save AdmiralPotato/6f5efa1e72987915c43bf718b4049710 to your computer and use it in GitHub Desktop.
Save AdmiralPotato/6f5efa1e72987915c43bf718b4049710 to your computer and use it in GitHub Desktop.
Download ZIP
Tribute to: thedotisblack's "Optical Art with Lines"
Raw
README.md

The original work that inspired me is fantastic. I wanted so see if I could pull it off real quick and easy in SVG. Answer is mostly, but by the time I felt like going to bed, I realized that they used decreasing space between the lines, and mine was constant. Check the original, it's super relaxing to watch - it's quite a bit faster than mine though.

Original work: Generative Pattern Drawing: Optical Art with Lines (Made with code / Processing)

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="./styles.css" />
<title>Admiral's tribute to thedotisblack's "Optical Art with Lines"</title>
<style id="yeah-dawg-im-selectin-a-style-tag-wat-u-gon-do">
#line{
stroke-width: 0.125;
}
</style>
</head>
<body>
<svg id="rootSVG" viewBox="-3 -3 6 6">
<defs>
<line stroke="#fff" id="line" x1="0" x2="0" y1="-6" y2="6" />
<g id="line-grid">
<use xlink:href="#line" transform="translate(0.0 0)" />
<use xlink:href="#line" transform="translate(0.2 0)" />
<use xlink:href="#line" transform="translate(0.4 0)" />
<use xlink:href="#line" transform="translate(0.6 0)" />
<use xlink:href="#line" transform="translate(0.8 0)" />
<use xlink:href="#line" transform="translate(1.0 0)" />
<use xlink:href="#line" transform="translate(1.2 0)" />
<use xlink:href="#line" transform="translate(1.4 0)" />
<use xlink:href="#line" transform="translate(1.6 0)" />
<use xlink:href="#line" transform="translate(1.8 0)" />
<use xlink:href="#line" transform="translate(2.0 0)" />
<use xlink:href="#line" transform="translate(2.2 0)" />
<use xlink:href="#line" transform="translate(2.4 0)" />
<use xlink:href="#line" transform="translate(2.6 0)" />
<use xlink:href="#line" transform="translate(2.8 0)" />
<use xlink:href="#line" transform="translate(3.0 0)" />
<use xlink:href="#line" transform="translate(3.2 0)" />
<use xlink:href="#line" transform="translate(3.4 0)" />
<use xlink:href="#line" transform="translate(3.6 0)" />
<use xlink:href="#line" transform="translate(3.8 0)" />
<use xlink:href="#line" transform="translate(4.0 0)" />
<use xlink:href="#line" transform="translate(4.2 0)" />
<use xlink:href="#line" transform="translate(4.4 0)" />
<use xlink:href="#line" transform="translate(4.6 0)" />
<use xlink:href="#line" transform="translate(4.8 0)" />
<use xlink:href="#line" transform="translate(5.0 0)" />
<use xlink:href="#line" transform="translate(5.2 0)" />
<use xlink:href="#line" transform="translate(5.4 0)" />
<use xlink:href="#line" transform="translate(5.6 0)" />
<use xlink:href="#line" transform="translate(5.8 0)" />
<use xlink:href="#line" transform="translate(6.0 0)" />
</g>
<g id="double-grid">
<use xlink:href="#line-grid" transform="rotate( 0) translate(0.1 0)" />
<use xlink:href="#line-grid" transform="rotate(180) translate(0.1 0)" />
</g>
</defs>
<circle fill="#000" r="6" />
<g id="line-grid-topia">
<use xlink:href="#double-grid" transform="rotate( 0)" />
<use xlink:href="#double-grid" transform="rotate( 30)" />
<use xlink:href="#double-grid" transform="rotate( 60)" />
<use xlink:href="#double-grid" transform="rotate( 90)" />
<use xlink:href="#double-grid" transform="rotate(120)" />
<use xlink:href="#double-grid" transform="rotate(150)" />
</g>
</svg>
<script type="text/javascript" src="./lines.js"></script>
</body>
</html>
Raw
lines.js
"use strict";
var svgElement = document.getElementById('rootSVG');
var styleElement = document.getElementById('yeah-dawg-im-selectin-a-style-tag-wat-u-gon-do');
var tau = Math.PI;
var animate = function (time) {
requestAnimationFrame(animate);
var phase = (time / 20000) + 0.875;
var rad = phase * tau;
var strokeWidth = (((Math.sin(rad) + 1) * 0.5) * 0.1850) + 0.0050;
var globalRotation = phase * 30;
var aspectRatio = svgElement.clientWidth / svgElement.clientHeight;
var wide = aspectRatio < 1;
var size = 5;
var width = !wide ? aspectRatio * size : size;
var height = wide ? aspectRatio * size : size;
var viewBox = [
width * -0.5,
height * -0.5,
width,
height
];
styleElement.innerText = '#line{stroke-width: ' + strokeWidth + ';}' +
'#line-grid-topia{transform: rotate(' + globalRotation+ 'deg);}';
svgElement.setAttribute('viewBox', viewBox.join(' '));
};
requestAnimationFrame(animate);
Raw
styles.css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
text-align: inherit;
text-decoration: inherit;
color: inherit;
background-color: transparent;
}
html, body{
height: 100%;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
background-color: #000;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
font-style: normal;
vertical-align: top;
font-family: 'Exo 2', sans-serif;
text-align: left;
text-decoration: none;
color: #ccc;
}
svg {
display: block;
width: 100%;
height: 100%;
background-color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment