Hélio Oiticica

index.html

 <div id="container">
   <canvas id="Oiticica" width="486" height="501"></canvas>
</div>
<!--
HTML5 painting based on:
Artist: Hélio Oiticica
Title Três tempos (quadro 1), 1956
-->

Neo-concretism.markdown

Neo-concretism

Três tempos (quadro 1), 1956 by Hélio Oiticica

A Pen by Tankred on CodePen.

License.

script.js

/*
<Palette name="Hélio_Oiticica"><Color COLOR="#DACEBE"></Color><Color COLOR="#09080D"></Color><Color COLOR="#07060C"></Color><Color COLOR="#020107"></Color><Color COLOR="#030208"></Color><Color COLOR="#847B76"></Color><Color COLOR="#991508"></Color><Color COLOR="#971209"></Color><Color COLOR="#901003"></Color><Color COLOR="#9D5C46"></Color><Color COLOR="#D8C9C2"></Color></Palette>
*/
var canvas = document.getElementById('Oiticica');
     var context = canvas.getContext('2d');
     context.beginPath();
     context.rect(0, 54, 162, 118);
     context.fillStyle = '#09080D';
     context.fill();
     context.lineWidth = 1;
     context.strokeStyle = '#958A6E';
     context.stroke();

     context.beginPath();
 context.rect(191, 54, 295, 118);
     context.fillStyle = '#07060C';
     context.fill();
     context.lineWidth = 1;
     context.strokeStyle = '#07060C';
     context.stroke();

     context.beginPath();
     context.rect(0, 212, 94, 213);
     context.fillStyle = '#991508';
     context.fill();
     context.lineWidth = 1;
     context.strokeStyle = '#9D5C46';
     context.stroke();

     context.beginPath();
     context.rect(152, 212, 334, 213);
     context.fillStyle = '#971209';
     context.fill();
     context.lineWidth = 1;
     context.strokeStyle = '#9D5C46';
     context.stroke();

     context.beginPath();
     context.rect(0, 424, 486, 22);
     context.fillStyle = '#020107';
     context.fill();
 
     context.beginPath();
     context.rect(0, 486, 486, 16);
     context.fillStyle = '#020107';
     context.fill();
  
     context.beginPath();
     context.rect(98, 424, 20, 160);
     context.fillStyle = '#020107';
     context.fill();

      var centerX = 152;
      var centerY = 112;
      var radius = 9;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = '#991508';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = '#64160C';
      context.stroke();

      var centerX = 92;
      var centerY = 467;
      var radius = 6;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = '#991508';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = '#D8C9C2';
      context.stroke();
     

      var centerX = 171;
      var centerY = 319;
      var radius = 18;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = '#030208';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = '#2E060E';
      context.stroke();
     

style.css

body{background:#2E2E2E;}
#container {width:486px;height:501px;
  margin:auto auto;border:8px solid #978D8E;}
#Oiticica {background:#DACEBE;border:1px solid #958A6E;}