<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ianfox/pen/xrLYJJ?limit=all&page=38&q=paint" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">:root {
--size1: 15px;
--size2: 2px;
--col1: #ffffff;
--col2: #000000;
--rotation: 45deg;
--animationSpeed: 10s;
}
#painting {
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
background: black;
width: 40vmin;
height: 50vmin;
position: relative;
overflow: hidden;
background: -webkit-repeating-radial-gradient(circle, var(--col1), var(--col1) var(--size1), var(--col2) var(--size1), var(--col2) calc(2 * var(--size1)));
background: repeating-radial-gradient(circle, var(--col1), var(--col1) var(--size1), var(--col2) var(--size1), var(--col2) calc(2 * var(--size1)));
}
#painting::before, #painting::after {
content: " ";
position: absolute;
top: -200%;
left: -200%;
width: 400%;
height: 400%;
}
#painting::before {
background: -webkit-repeating-linear-gradient(left, transparent, transparent var(--size2), var(--col2) var(--size2), var(--col2) calc(2 * var(--size2)));
background: repeating-linear-gradient(to right, transparent, transparent var(--size2), var(--col2) var(--size2), var(--col2) calc(2 * var(--size2)));
-webkit-transform: rotate(var(--rotation));
transform: rotate(var(--rotation));
}
#painting::after {
background: -webkit-repeating-linear-gradient(left, transparent, transparent var(--size2), var(--col1) var(--size2), var(--col1) calc(2 * var(--size2)));
background: repeating-linear-gradient(to right, transparent, transparent var(--size2), var(--col1) var(--size2), var(--col1) calc(2 * var(--size2)));
-webkit-transform: rotate(calc(-1 * var(--rotation)));
transform: rotate(calc(-1 * var(--rotation)));
}
#painting[data-animation="1"]::before {
-webkit-animation: before_spiralright var(--animationSpeed) linear infinite;
animation: before_spiralright var(--animationSpeed) linear infinite;
}
#painting[data-animation="2"]::before {
-webkit-animation: before_spiralleft var(--animationSpeed) linear infinite;
animation: before_spiralleft var(--animationSpeed) linear infinite;
}
#painting[data-animation="3"]::after {
-webkit-animation: after_spiralright var(--animationSpeed) linear infinite;
animation: after_spiralright var(--animationSpeed) linear infinite;
}
#painting[data-animation="4"]::after {
-webkit-animation: before_spiralleft var(--animationSpeed) linear infinite;
animation: before_spiralleft var(--animationSpeed) linear infinite;
}
#painting[data-animation="5"]::before {
-webkit-animation: before_spiralright var(--animationSpeed) linear infinite;
animation: before_spiralright var(--animationSpeed) linear infinite;
}
#painting[data-animation="5"]::after {
-webkit-animation: after_spiralright var(--animationSpeed) linear infinite;
animation: after_spiralright var(--animationSpeed) linear infinite;
}
#painting[data-animation="6"]::before {
-webkit-animation: before_spiralright var(--animationSpeed) linear infinite;
animation: before_spiralright var(--animationSpeed) linear infinite;
}
#painting[data-animation="6"]::after {
-webkit-animation: after_spiralleft var(--animationSpeed) linear infinite;
animation: after_spiralleft var(--animationSpeed) linear infinite;
}
#painting[data-animation="7"]::before {
-webkit-animation: before_spiralleft var(--animationSpeed) linear infinite;
animation: before_spiralleft var(--animationSpeed) linear infinite;
}
#painting[data-animation="7"]::after {
-webkit-animation: after_spiralright var(--animationSpeed) linear infinite;
animation: after_spiralright var(--animationSpeed) linear infinite;
}
#painting[data-animation="8"]::before {
-webkit-animation: before_spiralleft var(--animationSpeed) linear infinite;
animation: before_spiralleft var(--animationSpeed) linear infinite;
}
#painting[data-animation="8"]::after {
-webkit-animation: after_spiralleft var(--animationSpeed) linear infinite;
animation: after_spiralleft var(--animationSpeed) linear infinite;
}
@-webkit-keyframes before_spiralright {
0% {
-webkit-transform: rotate(calc(var(--rotation) + 0deg));
transform: rotate(calc(var(--rotation) + 0deg));
}
100% {
-webkit-transform: rotate(calc(var(--rotation) + 360deg));
transform: rotate(calc(var(--rotation) + 360deg));
}
}
@keyframes before_spiralright {
0% {
-webkit-transform: rotate(calc(var(--rotation) + 0deg));
transform: rotate(calc(var(--rotation) + 0deg));
}
100% {
-webkit-transform: rotate(calc(var(--rotation) + 360deg));
transform: rotate(calc(var(--rotation) + 360deg));
}
}
@-webkit-keyframes before_spiralleft {
0% {
-webkit-transform: rotate(calc(var(--rotation) + 0deg));
transform: rotate(calc(var(--rotation) + 0deg));
}
100% {
-webkit-transform: rotate(calc(var(--rotation) - 360deg));
transform: rotate(calc(var(--rotation) - 360deg));
}
}
@keyframes before_spiralleft {
0% {
-webkit-transform: rotate(calc(var(--rotation) + 0deg));
transform: rotate(calc(var(--rotation) + 0deg));
}
100% {
-webkit-transform: rotate(calc(var(--rotation) - 360deg));
transform: rotate(calc(var(--rotation) - 360deg));
}
}
@-webkit-keyframes after_spiralright {
0% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) + 0deg));
transform: rotate(calc((-1 * var(--rotation)) + 0deg));
}
100% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) + 360deg));
transform: rotate(calc((-1 * var(--rotation)) + 360deg));
}
}
@keyframes after_spiralright {
0% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) + 0deg));
transform: rotate(calc((-1 * var(--rotation)) + 0deg));
}
100% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) + 360deg));
transform: rotate(calc((-1 * var(--rotation)) + 360deg));
}
}
@-webkit-keyframes after_spiralleft {
0% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) + 0deg));
transform: rotate(calc((-1 * var(--rotation)) + 0deg));
}
100% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) - 360deg));
transform: rotate(calc((-1 * var(--rotation)) - 360deg));
}
}
@keyframes after_spiralleft {
0% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) + 0deg));
transform: rotate(calc((-1 * var(--rotation)) + 0deg));
}
100% {
-webkit-transform: rotate(calc((-1 * var(--rotation)) - 360deg));
transform: rotate(calc((-1 * var(--rotation)) - 360deg));
}
}
body {
background: #aaaaaa;
}
.hanger {
position: absolute;
bottom: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-left: solid 50px transparent;
border-right: solid 50px transparent;
border-bottom: solid 100px black;
}
.hanger:before {
content: " ";
position: absolute;
left: 0;
-webkit-transform: translate(-50%, 1px) scale(0.97);
transform: translate(-50%, 1px) scale(0.97);
border-left: solid 50px transparent;
border-right: solid 50px transparent;
border-bottom: solid 100px #aaaaaa;
}
button:after {
content: " (" attr(data-animation) ")";
}
body {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
body > * + * {
margin-top: 3px;
}
</style></head><body>
<div id="painting" data-animation="0">
<div class="hanger"></div>
</div>
<!-- controls for funsies -->
<div>
<label for="">size1</label>
<input type="number" id="--size1" data-suffix="px" />
</div>
<div>
<label for="">size2</label>
<input type="number" id="--size2" data-suffix="px" />
</div>
<div>
<label for="">col1</label>
<input type="color" id="--col1" data-suffix="" />
</div>
<div>
<label for="">col2</label>
<input type="color" id="--col2" data-suffix="" />
</div>
<div>
<label for="">rotation</label>
<input type="number" id="--rotation" data-suffix="deg" />
</div>
<div>
<button data-animation="0">Toggle animation</button>
</div>
<div>
<label for="">animation speed (seconds)</label>
<input type="number" id="--animationSpeed" data-suffix="s" />
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >window.getCssVarValue = window.getCssVarValue || function(variable) {
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue(variable)).trim();
return value;
}
window.setCssVarValue = window.setCssVarValue || function(variable, value) {
document.documentElement.style.setProperty(variable, value);
localStorage.setItem(variable, value);
}
$(function() {
console.clear();
var variables = ['--col1', '--col2', '--size1', '--size2', '--rotation', '--animationSpeed'];
for (var i = 0; i < variables.length; i++) {if (window.CP.shouldStopExecution(1)){break;}
let v = variables[i];
let input = $('#' + v);
let suffix = input.attr('data-suffix');
var saved = localStorage.getItem(v);
if (saved) {
window.setCssVarValue(v, saved);
}
input.val(window.getCssVarValue(v).replace(suffix, ''));
input.on('change', function(e) {
window.setCssVarValue(v, e.target.value + suffix);
})
}
window.CP.exitedLoop(1);
var numberAnimations = 8;
$('button').on('click', function() {
var a = parseInt($('#painting').attr('data-animation')) + 1;
a = a % (numberAnimations + 1);
console.log(a);
$('#painting').attr('data-animation', a);
$('button').attr('data-animation', a);
})
});
//# sourceURL=pen.js
</script>
</body></html>
