Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="l-wrapper" data-size="300" data-oneside="9">
  <div class="b-panel b-panel--top">  
    <div class="b-palette b-panel__item"></div>
    <div class="b-duration b-panel__item"><h4 class='b-title'>Duration</h4>
      <input type="text" value="2" class="text text--value text--duration" data-min="0" maxlength="2"/> sec.</div>
    <div class="b-size b-panel__item"><h4 class='b-title'>Dotts</h4>
      <input type="text" value="10" class="text text--value text--dots" data-min="1" data-max="20" maxlength="2"/></div>
    <div class="b-size b-panel__item"><h4 class='b-title'>Size</h4>
      <input type="text" value="30" class="text text--value text--size" data-min="2" data-max="300" maxlength="3"/> px</div>
  </div>  
  <div class="b-boxes">
    <div class="l-zero-gravity">
      <div class="b-box b-box--paint"></div>
      <div class="b-box b-box--result"><span class="dot is-running"></span></div>
    </div>  
  </div>
  <div class="b-panel b-panel--bottom">   
    <div class="b-steps"></div>
  </div>   
  <div class="b-codes">
    <span class="b-codes__toggle" data-init = "Get codes" data-opened = "Close">Get codes</span>
    <div class="b-codes__wrapper">
      <h3 class="b-codes--title">CSS</h3>
      <textarea class="b-codes__textarea textarea--css"></textarea>
      <h3 class="b-codes--title">HTML</h3>
      <textarea class="b-codes__textarea textarea--html"></textarea>
    </div>
  </div>
</div>
<div class="hello">
  <div class="hello__decor"></div>
  <div class="hello__text">
    <h2>Shadow Painter</h2> <span>Try to paint your pixel animation!</span>
  </div>
</div>
              
            
!

CSS

              
                $sideCells: 10;
$dotSize: 30px;
$box-size: $dotSize * $sideCells;
$radius: 0;

$padding: 20px;

$hello-height: 160px;

$color-border: #CCC;
$color-active: orange;
$color-step: lightgray;
$color-step-l: lighten($color-step, 12);
$color-step-d: darken($color-step, 20);

@mixin clear {
  content: '';
  display: table;
  width: 100%;
  clear: both;
}

@mixin dotted-text($color: #555) {
  border-bottom: 1px dotted;
  line-height: 1.2;
  color: $color;
  cursor: pointer;
}

$time: 1s;

* {
box-sizing: border-box;
}

BODY {
  background: #FFF;
  font: 14px/1.4 'Trebuchet MS', Verdana, sans-serif;
  color: #333;
}

LABEL {
  cursor: pointer;
}

.l-wrapper {
  position: absolute;
  display: inline-block;
  margin: auto;
  left: 1em;
  right: 1em;
  top: 1em;
  bottom: 1em;
  border: 1px solid $color-border;
  white-space: nowrap;
  &:after {
    @include clear;
    }
  }

.b-boxes {
  position: relative;
  text-align: center;
  border: 1px solid $color-border;
  border-width: 1px 0;
}
.l-zero-gravity {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.b-box {
  position: relative;
  display: inline-block;
  border: 1px solid $color-border;
  &:nth-of-type(1){
    margin-right: $padding;
    }
}
.b-panel {
  padding: $padding/2;
  color: #888;
  &:before,
  &:after {
    @include clear;
    }
}


.b-panel--top {
}

.b-panel--bottom {
}


.b-title {
  display: inline-block;
  padding-right: $padding/2;
  line-height: $dotSize;
  }

.b-steps .b-title {
  float: none;
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  }
  
/* Paint Box 
----------------------------- */
.b-box--paint {
  overflow: hidden;
  border-width: 0 1px 1px 0;
  background-image: 
    linear-gradient( to right,
      $color-border 1px,
      transparent 1px
    ),
    linear-gradient( to bottom,
      $color-border 1px,
      transparent 1px
    );
  background-position: 0 0;
}
/* Labels 
----------------------------- */
.cell {
  display: block;
  float: left;
}
.cell__inp {
  position: absolute;
  display: none;
  }
.cell__lbl {
  display: block;
  border-radius: $radius; 
  /*box-shadow: 0 0 2px #999 inset;*/

}
:checked + .cell__lbl {
  position: relative;
  }
.is-colored {
  background: $color-active;
}

/* Result Box 
----------------------------- */
.b-box--result {
  overflow: hidden;
  }

/* Dotts 
----------------------------- */

.dot {
  display: block;
  position: absolute;
  border-radius: $radius; 
}
.dot--previous {
  opacity: .2;
}

.is-running{
}

@keyframes shadows {}
@-webkit-keyframes shadows {}

/* Palette
----------------------------- */
.b-palette {  
  display: inline-block;
}
.items--colors {
  display: inline-block;
  vertical-align: middle;
}
.color {
  display: inline-block;
  width: $dotSize;
  height: $dotSize;
  }
.color__inp {
  display: none;
  }

.color__lbl {
  display: block;
  height: $dotSize;
}
:checked + .color__lbl {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .3);
}

/* Color Controls
----------------------------- */
.items--colors-controls {
  display: inline-block;  
  position: relative;
  height: $dotSize;
  margin-left: 5px;
  vertical-align: middle;
}
.colors-controls__item {
  position: absolute;
  border: 10px solid transparent;
  border-color: $color-step-d transparent;
  border-width: 10px 4px;
  cursor: pointer;
  &:hover {
    border-color: darken($color-step-d, 10) transparent;
  }
  &:active {
    border-color: darken($color-step-d, 30) transparent;
  }
}
.colors-controls__item--up {
  top: 0;
  border-top: 0;
  &:active {
    top: 2px;
  }
}
.colors-controls__item--down {
  bottom: 0;
  border-bottom: 0;
  &:active {
    bottom: -2px;
  }
}
/* Panel
----------------------------- */
.b-panel {
  position: relative;
  }  
.b-panel__item {
  float: left;
  margin-left: $padding*1.6;
  &:first-child {
    margin-left: 0;
    }
}
.text--value {
  width: 3.5em;
  height: $dotSize;
  line-height: $dotSize;
  pading: 0;
  border: 1px solid $color-border;
  border-radius: 5px;
  text-align: center;
}

/* Steps
----------------------------- */
.b-steps {
  text-align: center;
  -webkit-user-select: none;  
  -moz-user-select: none;  
  -ms-user-select: none;   
  user-select: none;   
}
.steps-control {
  display: inline-block;
  position: relative;
  width: $dotSize*.8;
  height: $dotSize*.8;
  line-height: $dotSize*.8;
  margin: 0 6px;
  top: 0;
  background: $color-step;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  -webkit-transition: all .1s;
  transition: all .2s;
  }
.steps-control:hover {
  top: -1px;  
  background: $color-step-l;
  color: #555;
}
.steps-control:active {
  top: 1px; 
  background: $color-step-d;
  color: #FFF;
}

.is-disabled,
.is-disabled:hover  {
  top: 0; 
  background: $color-step-l;
  color: #AAA;
  cursor: default;
}

.items--steps {
  display: block;
  margin-top: 10px;
}
.step {
  display: inline-block;
  width: $dotSize;
  height: $dotSize;
  margin-right: 1px;
  line-height: $dotSize;
  background: $color-step-l;
  text-align: center;
  }
.step__inp {
  position: absolute;
  display: none;
  }
.step__lbl {
  display: block;
  height: $dotSize;
}
.is--filled + .step__lbl {
  background: $color-step;
  }

:checked + .step__lbl {
  position: relative;
  z-index: 1;
  background: $color-step-d;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .3);
  color: #FFF;
}

.is-hidden {
  display: none;
}

.frames-clear {
  position: absolute;
  top: $padding/2;
  &:hover {
    padding-top: 1px;
  }
}

.frames-clear--current {
  left: $padding/2;
  @include dotted-text;
}
.frames-clear--all {
  right: $padding/2;
  @include dotted-text(orangered);
}

.is--sleepy {
  color: #777
}
/* Codes
----------------------------- */
.b-codes {
  /*display: none;*/
  
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(240, 240, 240, .9);
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
 
}
.is-open {
  right: -.5em;
  left: -.5em;
  box-shadow: 0 0 20px rgba(0, 0, 0, .3),
     0 0 0 1000px rgba(255, 255, 255, .8);
}

.b-codes__toggle {
  position: absolute;
  top: -$padding*1.2;
  right: $padding/2;
  @include dotted-text;
  &:hover {
    padding-top: 1px;
  }
}
.b-codes__wrapper {
  display: none;
  padding: $padding;
  border: 1px solid #BBB;
  .is-open & {
    display: block;
    }
  }

.b-codes--title {
  margin-bottom: $padding/3;
  color: #777;
}
.b-codes__textarea {
  display: block;
  width: 100%;
  height: $dotSize*4;
  border: 1px solid $color-border;
  }
.textarea--css {
    margin-bottom: $padding;  
    }


.hello {
  display: none;
  position: absolute;
  z-index: 10;
  height: $hello-height;
  width: 100%;
  top: -1em;
  bottom: -1em;
  margin: auto;
  background: #B5E655;
  text-shadow: 0 0 3px rgba(0,0,0,.5);
  text-align: center;
  color: #FFF;
  H2 { 
    font-size: 4em;
    line-height: 1em;
  }
  SPAN {
    font-size: 2em;
  }
  &:before {
    content: "";
    display: inline-block;
    height: $hello-height;
    vertical-align: middle;
  }
}
.hello__decor {
  position: absolute;
  z-index: -1;
  top: 0;
  height: $hello-height;
  width: 100%;
  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg,
      //#96CA2D","#B5E655","#EDF7F2","#4BB5C1","#7FC6BC"
      #7FC6BC 1em,
      #96CA2D 1em, #96CA2D 2em,
      #4BB5C1 2em, #4BB5C1 3em, 
      #EDF7F2 3em, #EDF7F2 4em,
      #B5E655 4em, #B5E655 5em
    );
    background-size: 5em 1em;
  }
  &:after {
    bottom: 0;
    background-position: -3em 0;
  }
}
.hello__text {
  display: inline-block;
  vertical-align: middle;
}

BODY[onload^="_l"]{
  .hello {
/*     display: block; */
  }
}
              
            
!

JS

              
                console.clear();
var line = '------------------------';

function ShadowPainter() {
  this.timer;
  this.isMousePressed = false;

  this.classNames = {
    wrapper: '.l-wrapper',
    paintBox: '.b-box--paint',
    resultBox: '.b-box--result',
    resultDot: '.b-box--result .dot',
    palette: '.b-palette',
    steps: '.b-steps',

    codes: '.b-codes',
    codesToggle: '.b-codes__toggle',
    codesCSS: '.textarea--css',
    codesHtml: '.textarea--html',

    durationInp: '.text--duration',
    sizeInp: '.text--size',
    dotsInp: '.text--dots',
    isRunning: 'is-running',
  };

  this.Elems = {};

  this.Cell = {
    className: 'cell',
    inputType: 'checkbox',
    inputClass: 'cell__inp',
    labelClass: 'cell__lbl',
    inputData: 'data-hpos="{hpos}"  data-vpos="{vpos}" ',
    labelContent: '',
    dots: '<span class="dot dot--previous"></span><span class="dot"></span>'
  };

  this.Palettes = [
    ['#3FB8AF','#7FC7AF','#DAD8A7','#FF9E9D','#FF3D7F'],
    ['#468966','#FFF0A5','#FFB03B','#B64926','#8E2800'],
    ['#004358','#1F8A70','#BEDB39','#FFE11A','#FD7400'],
    ['#96CA2D','#B5E655','#EDF7F2','#4BB5C1','#7FC6BC'],
    ['#2E0927','#D90000','#FF2D00','#FF8C00','#04756F'],
    ['#FCFFF5','#D1DBBD','#91AA9D','#3E606F','#193441'],
    ['#332532','#644D52','#F77A52','#FF974F','#A49A87']
  ];

  this.Colors = this.initColors();
  this.Step = this.initStep();

  this.stylesClassNames = {
    config: 'configBox',
    shadows: 'stylesBox',
    colors: 'colorsBox'
  };
  this.Styles = {};

  this.Output = {
    HTML: '',
    CSS: '',
    Animation: '',
    comment: 'Created in shadowPainter : )'
  };

  this.Scene = {
    oneSide: 5,// dottes in line
    oneSideMax: 30,// dottes in line
    size: 250,
    dotSize: 30,// pixels
    padding: 20,// pixels. Don't change it
    border: 1// pixels
  };

  this.Anim = {
    steps: 5,
    stepsMax: 20,
    duration: '1s',
    name: 'shadows',
    keyframes: findKeyFrames('shadows')
  };
  this.Anim.rules = this.Anim.keyframes.cssRules;

  this.isCodeOpened = false;

  this.Frames = {};
  this.currentFrame = 0;

  this.init = function () {
    this.createTemplates();
    this.createStylesBoxes();

    this.initElements();
    this.addConfig();
    this.createInputsSet();
    this.createFramesSet();
    this.createPalette();
    this.createSteps();
    this.createCodes();
    this.createDurationInp();
    this.createSizeInp();
    this.createDotsInp();
  };

} // End ShadowPainter()

// -----------------------------------------

ShadowPainter.prototype.setTimer = function(func, params) {
  if (this.timer) {
    this.clearTimeout(this.timer);
  }
  var execFunc = function () {
    func(params);
  };
  this.timer = this.setTimeout(execFunc , 50);
};

// -----------------------------------------

ShadowPainter.prototype.getAnimStr = function() {
  return `${this.Anim.duration} ${this.Anim.name} linear infinite`;
};

// -----------------------------------------

ShadowPainter.prototype.initElements = function () {
  for (var className in this.classNames) {
    this.Elems[className] = document.querySelector(this.classNames[className]);
  }
};

// -----------------------------------------

ShadowPainter.prototype.setParams = function () {
  let dotSize = (this.Scene.size / this.Scene.oneSide);
  this.Scene.dotSize = dotSize.toFixed();
  this.Scene.size = this.Scene.dotSize * this.Scene.oneSide;

  this.configElemParams = {
    '.l-wrapper': {
      'width': 700, // size * 2 + this.Scene.padding * 3 + border*6
      'height': 490, // size + this.Scene.padding * 2 + border*4
    },
    '.b-boxes': {
      'height': 340
    },
    '.l-zero-gravity': {
      'height': this.Scene.size + this.Scene.border
    },
    '.b-box': {
      'width': this.Scene.size + this.Scene.border,
      'height': this.Scene.size
    },
    '.cell__lbl': {
      'width': this.Scene.dotSize,
      'height': this.Scene.dotSize
    },
    '.dot': {
      'width': this.Scene.dotSize,
      'height': this.Scene.dotSize,
      'top': '-' + this.Scene.dotSize,
      'left': '-' + this.Scene.dotSize
    },
    '.is-running': {
      'animation': this.getAnimStr()
    },
    '.b-box--paint': {
      'background-size': this.Scene.dotSize + ' ' + this.Scene.dotSize
    }
  };
};

// -----------------------------------------

ShadowPainter.prototype.setOutputParams = function () {
  this.outputElemParams = {
    '.box': {
      'position': 'absolute',
      'top': '0',
      'bottom': '0',
      'left': '0',
      'right': '0',
      'margin': 'auto',
      'width': this.Scene.size,
      'height': this.Scene.size,
      'overflow': 'hidden',
      'border': '1px solid #DDD'
    },
    '.dot': {
      'display': 'block',
      'position': 'absolute',
      'width': this.Scene.dotSize,
      'height': this.Scene.dotSize,
      'top': '-' + this.Scene.dotSize,
      'left': '-' + this.Scene.dotSize,
      'animation': this.getAnimStr()
    }
  };
};

// -----------------------------------------

ShadowPainter.prototype.addConfig = function () {
  this.setParams();

  var styles = '';
  for (var elem in this.configElemParams) {
    var className = elem;
    var elemStyles = '';
    var params = this.configElemParams[elem];
    for (var item in params) {
      var value = addUnits(params[item], item);
      elemStyles += item + ': ' + value + ';\n';
    }
    styles += className + ' {\n' + elemStyles + '}\n';
  }

  this.Styles.config.innerHTML = styles;
};

// -----------------------------------------

ShadowPainter.prototype.createStylesBoxes = function () {
  for (var styleBox in this.stylesClassNames) {
    this.Styles[styleBox] = addStylesElem(this.stylesClassNames[styleBox]);
  }
};

// -----------------------------------------

ShadowPainter.prototype.createTemplates = function () {
  var templatesConfig = [this.Cell, this.Colors, this.Step];

  for (var i = 0; i < templatesConfig.length; i++) {
    var item = templatesConfig[i];
    item.template = createTemplate(item);
  }
};

// -----------------------------------------

ShadowPainter.prototype.createControls = function (data) {
  var output = '';

  var counter = 0;
  for (var item in data.list) {
    data.replacements['{action}'] = item;
    data.replacements['{text}'] = data.list[ item ];
    output += fillTemplate(data.template, data.replacements);

    if (counter === 0 && data.insertBetween) {
      output += data.insertBetween;
    }
    counter++;
  }
  return output;
};

// -----------------------------------------

ShadowPainter.prototype.addDataDefautlt = function (elem, defaultValue) {
  var defData = elem.getAttribute('data-default');

  if (defData === null) {
    elem.setAttribute('data-default', defaultValue);
  }
};

// -----------------------------------------

ShadowPainter.prototype.addEvents = function (itemsClass, func) {
  itemsClass = checkClassDot(itemsClass);
  var items = document.querySelectorAll(itemsClass);
  var parent = this;

  for (var i = 0; i < items.length; i++) {
    items[i].onclick = function () {
      func.call(parent, this);
    };
  }
};

// -----------------------------------------

ShadowPainter.prototype.addOverEvents = function (itemsClass, func) {
  itemsClass = checkClassDot(itemsClass);
  var items = document.querySelectorAll(itemsClass);
  var parent = this;

  for (var i = 0; i < items.length; i++) {
    items[i].onmousedown = function () {
      this.isMousePressed = true;
    };

    items[i].onmouseup = function () {
      this.isMousePressed = false;
    };

    items[i].onmouseover = function () {
      if (this.isMousePressed) {
        func.call(parent, this);
      }
    };
  }
};

// -----------------------------------------

ShadowPainter.prototype.checkInputValue = function (params) {
  var elem = params.elem;
  var func = params.func;
  var parent = params.parent;

  var minMax = minMaxDef(elem);
  var isNan = valueSetDefaultIfNAN(elem);

  if (isNan) {
    elem.value = isNan;
  }

  if (minMax) {
    elem.value = minMax;
  }

  func.call(parent, elem);
};

// -----------------------------------------

ShadowPainter.prototype.addOnChangeEvents = function (itemsClass, func) {
  var items = document.querySelectorAll(itemsClass);
  var parent = this;

  var params = {
    func: func,
    parent: parent
  };

  for (var i = 0; i < items.length; i++) {
    items[i].onkeyup = function (event) {
      params.elem = this;

      if (event.keyCode === 38 || event.keyCode === 40) {

        this.value = getValByKeyCode(this, event.keyCode, event.shiftKey);
        func.call(parent, this);
      }
      else {
        this.setTimer(parent.checkInputValue, params);
      }
    };

    items[i].onchange = function () {
      params.elem = this;
      parent.checkInputValue(params);
    };

    items[i].onblur = function () {
      params.elem = this;
      parent.checkInputValue(params);
    };
  }
};

// -----------------------------------------

ShadowPainter.prototype.createInputsSet = function () {
  this.Elems.paintBox.innerHTML = this.Cell.dots;
  var output = '';

  for (var i = 0; i < this.Scene.oneSide * this.Scene.oneSide; i++) {
    var hpos = i % this.Scene.oneSide + 1;
    var vpos = Math.floor(i / this.Scene.oneSide) + 1;

    var replacements = {
      '{i}': i,
      '{hpos}': hpos,
      '{vpos}': vpos
    };
    var checkBox = fillTemplate(this.Cell.template, replacements);
    output += checkBox;
  }

  this.Elems.paintBox.innerHTML += `<ul class="items items--dots">${output}</ul>`;

  this.addOverEvents(this.Cell.labelClass, this.onOverLabel);
  this.addEvents(this.Cell.inputClass, this.onClickCell);
};

// -----------------------------------------

ShadowPainter.prototype.createFramesSet = function () {
  for (var k = 0; k < this.Anim.stepsMax; k++) {
    this.Frames[k] = {active: 0};

    for (var hpos = 0; hpos < this.Scene.oneSideMax; hpos++) { // verticals
      this.Frames[k][hpos] = {};

      for (var vpos = 0; vpos < this.Scene.oneSideMax; vpos++) { // gorizontals

        this.Frames[k][hpos][vpos] = {
          'hpos': hpos,
          'vpos': vpos,
          'color': this.Colors.transparent
        };
      } // End gorizontals
    } // End verticals
  }
};

// -----------------------------------------

ShadowPainter.prototype.resetCurrentFrame = function () {
  var k = this.currentFrame;
  this.Frames[k] = {active: 0};

  for (var hpos = 0; hpos < this.Scene.oneSideMax; hpos++) { // verticals
    this.Frames[k][hpos] = {};

    for (var vpos = 0; vpos < this.Scene.oneSideMax; vpos++) { // gorizontals
      this.Frames[k][hpos][vpos] = {
        'color': this.Colors.transparent
      };
    } // End gorizontals
  } // End verticals
};

// -----------------------------------------

ShadowPainter.prototype.toggleColorClass = function (elem) {
  var findClass = this.Colors.className + '--';
  var classes = elem.classList;

  for (var i = 0; i < classes.length; i++) {

    if (classes[i].indexOf(findClass) >= 0) {
      classes.remove(classes[i]);
      return;
    }
  }

  classes.add(findClass + this.Colors.currentNum);
};

// -----------------------------------------

ShadowPainter.prototype.onClickCell = function (elem) {
  this.updateFrames(elem);
};

// -----------------------------------------

ShadowPainter.prototype.onOverLabel = function (elem) {
  var input = elem.previousSibling;

  if (input.checked === true) {
    input.checked = false;
  }
  else {
    input.checked = true;
  }

  this.updateFrames(input);
};

// -----------------------------------------

ShadowPainter.prototype.updateFrames = function (elem) {
  var hpos = elem.getAttribute('data-hpos');
  var vpos = elem.getAttribute('data-vpos');

  var place = this.Frames[this.currentFrame];
  var color = this.Colors.transparent;

  if (elem.checked) {
    color = this.Colors.current;
    place.active++;
  }
  else {
    place.active--;
  }

  place[hpos][vpos].color = color;
  this.paintShadow();
};

// -----------------------------------------

ShadowPainter.prototype.paintShadow = function () {
  var styles = '';
  var framesLength = this.Anim.steps; // objLength(this.Frames);
  var perc = this.Anim.steps === 1 ? 0 : (100 / framesLength).toFixed(3);
  var dottes = this.Frames[this.currentFrame];
  var shadows = this.createShadow(dottes);

  styles = '.b-box--paint .dot {\n ' + shadows + ' \n}\n';

  dottes = this.Frames[0];
  shadows = this.createShadow(dottes);
  styles += this.classNames.resultDot + ' {\n ' + shadows + ' \nanimation-duration: ' + this.Anim.duration + ';\n}\n';

  if (this.currentFrame > 0) {
    dottes = this.Frames[this.currentFrame - 1];
    shadows = this.createShadow(dottes);

    styles += '.b-box--paint .dot--previous {\n ' + shadows + ' \n}\n';
  }

  this.Styles.shadows.innerHTML = styles;

  this.replaceAnimation({perc: perc});
};

// -----------------------------------------

ShadowPainter.prototype.createShadow = function (dottes, is_value) {
  if (dottes === undefined) {
    return;
  }

  var shadows = '';
  var if_first = true;

  for (var hpos = 0; hpos < this.Scene.oneSide + 1; hpos++) {
    for (var vpos = 0; vpos < this.Scene.oneSide + 1; vpos++) {
      var dot = dottes[hpos][vpos];

      var hpos_px = dot.hpos * this.Scene.dotSize + 'px';
      var vpos_px = dot.vpos * this.Scene.dotSize + 'px';
      var color = this.Colors.transparent;


      if (dot.color !== this.Colors.transparent) {
        color = dot.color;
      }

      if (if_first) {
        if_first = false;
      }
      else {
        shadows += ', ';
      }

      shadows += hpos_px + ' ' + vpos_px + ' 0 0 ' + color;
    }
  }

  if (!is_value) {
    shadows = 'box-shadow: ' + shadows + ';';
  }

  return shadows;
};

// -----------------------------------------

ShadowPainter.prototype.deleteKeyframes = function () {
  var rules = this.Anim.rules;
  var keyFrames = this.Anim.keyframes;
  const max = 1000;
  let counter = 0;

  while (keyFrames.cssRules.length > 0 && counter < max) {
    const {keyText} = keyFrames.cssRules[0];
    keyFrames.deleteRule(keyText);

    counter++;
  }
};

// -----------------------------------------

ShadowPainter.prototype.replaceAnimation = function (animation) {
  this.Output.Animation = '';
  this.deleteKeyframes();

  if (this.Anim.steps === 1) {
    this.restartAnimation();
    return;
  }

  for (var step = 0; step < this.Anim.steps; step++) {
    var anim_dottes = this.Frames[step];
    var anim_shadows = this.createShadow(anim_dottes);
    var stepPercents = +(animation.perc * step).toFixed(3);
    var frameRule = `${stepPercents}% {\n${anim_shadows}\n}`;

    this.Anim.keyframes.appendRule(frameRule);
    this.Output.Animation += frameRule + '\n';
  }

  this.restartAnimation();
};

// -----------------------------------------

ShadowPainter.prototype.restartAnimation = function () {
  var resultDot = document.querySelector(this.classNames.resultDot);
  resultDot.classList.remove(this.classNames.isRunning);
  resultDot.classList.add(this.classNames.isRunning);
};

// -----------------------------------------

ShadowPainter.prototype.createPalette = function () {
  const paletteControls = this.createControls(this.Colors.upDown);
  this.Elems.palette.innerHTML += '<h4 class="b-title">Colors</h4> ';
  this.Elems.palette.innerHTML += '<ul class="items items--colors"></ul>';
  this.Elems.palette.innerHTML += `<ul class="items items--colors-controls">${paletteControls}</ul>`;

  this.fillPalette();
  this.addEvents(this.Colors.inputClass, this.onClickColor);

  var first = document.querySelector(checkClassDot(this.Colors.inputClass));
  first.checked = true;

  this.addEvents(this.Colors.controlClass, this.onClickColorControl);
};

// -----------------------------------------

ShadowPainter.prototype.fillPalette = function () {
  var output = '';
  var colorsItems = document.querySelector('.items--colors');
  this.Styles.colors.innerHTML = '';

  for (var i = 0; i < this.Colors.list.length; i++) {
    var replacements = {
      '{i}': i,
      '{color}': this.Colors.list[i]
    };
    var colorItem = fillTemplate(this.Colors.template, replacements);
    var colorStyle = fillTemplate(this.Colors.StyleTempl, replacements);
    this.Styles.colors.innerHTML += colorStyle;
    output += colorItem;
  }

  colorsItems.innerHTML = output;
};

// -----------------------------------------

ShadowPainter.prototype.reFillPalette = function () {
  var colorsItems = document.querySelectorAll(checkClassDot(this.Colors.inputClass));
  this.Styles.colors.innerHTML = '';

  for (var i = 0; i < this.Colors.list.length; i++) {
    colorsItems[i].setAttribute('data-color', this.Colors.list[i]);
    var replacements = {
      '{i}': i,
      '{color}': this.Colors.list[i]
    };
    var colorStyle = fillTemplate(this.Colors.StyleTempl, replacements);

    this.Styles.colors.innerHTML += colorStyle;
  }
};

// -----------------------------------------

ShadowPainter.prototype.onClickColor = function (elem) {
  this.Colors.current = elem.getAttribute('data-color');
  this.Colors.currentNum = elem.getAttribute('data-color-num');
  this.Colors.classCurrent = this.Colors.className + '--' + this.Colors.currentNum;
};

// -----------------------------------------

ShadowPainter.prototype.onClickColorControl = function (elem) {
  var direct = elem.getAttribute('data-direction');
  var max = this.Palettes.length - 1;

  if (direct === 'up') {
    if (this.Colors.currentListNum < max) {
      this.Colors.currentListNum++;
    }
    else {
      this.Colors.currentListNum = 0;
    }
  }
  else {
    if (this.Colors.currentListNum > 0) {
      this.Colors.currentListNum--;
    }
    else {
      this.Colors.currentListNum = max;
    }
  }

  this.Colors.list = this.Palettes[this.Colors.currentListNum];
  this.Colors.current = this.Colors.list[this.Colors.currentNum];
  this.Colors.classCurrent = this.Colors.className + '--' + this.Colors.currentNum;

  this.reFillPalette();
};

// -----------------------------------------

ShadowPainter.prototype.createSteps = function () {
  var output = '';
  const plusMinusControls = this.createControls(this.Step.plusMinus);
  this.Elems.steps.innerHTML += `<h4 class="b-title">${plusMinusControls}</h4>`;

  for (var i = 0; i < this.Anim.stepsMax; i++) {
    var customClass = i < this.Anim.steps ? '' : ' ' + this.Step.hiddenClass;

    var replacements = {
      '{i}': i,
      '{i+1}': i+1,
      '{customClass}': customClass
    };

    var stepItem = fillTemplate(this.Step.template, replacements);
    output += stepItem;
  }

  this.Elems.steps.innerHTML += `<ul class="items items--steps">${output}</ul>`;

  this.Elems.steps.innerHTML += this.createControls(this.Step.clearFrames);

  var first = document.querySelector(checkClassDot(this.Step.inputClass));
  first.checked = true;

  this.addEvents(this.Step.inputClass, this.onClickStep);
  this.addEvents(this.Step.controlClass, this.onClickStepControl);
  this.addEvents(this.Step.clearFramesClass, this.onClickClearFrames);
};

// -----------------------------------------

ShadowPainter.prototype.onClickStep = function (elem) {
  this.currentFrame = elem.getAttribute('data-step-num');
  this.paintShadow();
  this.updateCells();
};

// -----------------------------------------

ShadowPainter.prototype.onClickStepControl = function (elem) {
  var action = elem.getAttribute('data-action');
  var stepsItems = document.querySelectorAll(checkClassDot(this.Step.className));
  var division = stepsItems[this.Anim.steps - 1];

  if (action === 'plus' && this.Anim.steps < this.Anim.stepsMax) {
    this.Anim.steps++;

    division.nextSibling.classList.remove(this.Step.hiddenClass);
    this.paintShadow();

    if (this.Anim.steps === this.Anim.stepsMax) {
      elem.classList.add(this.Step.disabledClass);
    }
    else if (this.Anim.steps === 2) {
      this.enableControls();
    }
  }
  else if (action === 'minus' && this.Anim.steps > 1) {
    this.Anim.steps--;
    division.classList.add(this.Step.hiddenClass);
    this.paintShadow();

    if (this.Anim.steps === this.currentFrame) {
      this.currentFrame--;
      var prevInput = document.querySelectorAll(checkClassDot(this.Step.inputClass))[this.currentFrame];
      prevInput.checked = true;
    }

    if (this.Anim.steps === 1) {
      elem.classList.add(this.Step.disabledClass);
    }
    else if (this.Anim.steps === this.Anim.stepsMax - 1) {
      this.enableControls();
    }
  }
};

// -----------------------------------------

ShadowPainter.prototype.enableControls = function () {
  var disabledItem = document.querySelector(checkClassDot(this.Step.disabledClass));
  if (disabledItem) {
    disabledItem.classList.remove(this.Step.disabledClass);
  }
};

// -----------------------------------------

ShadowPainter.prototype.onClickClearFrames = function (elem) {
  var action = elem.getAttribute('data-action');

  if (action === 'all') {
    this.createFramesSet();
    this.paintShadow();
    this.updateCells();
  }
  else {
    this.resetCurrentFrame();
    this.paintShadow();
    this.updateCells();
  }
};

// -----------------------------------------

ShadowPainter.prototype.updateSteps = function () {
  var radio = this.Elems.steps.querySelectorAll('input');

  for (var i = 0; i < radio.length; i++) {
    if (this.Frames[i].active > 0) {
      radio[i].classList.add('is--filled');
    }
    else {
      radio[i].classList.remove('is--filled');
    }
  }
};

// -----------------------------------------

ShadowPainter.prototype.updateCells = function () {
  var checkboxes = this.Elems.paintBox.querySelectorAll('input');
  var frameCells = this.Frames[this.currentFrame];
  var colored = 0;

  for (var i = 0; i < checkboxes.length; i++) {
    var cell = checkboxes[i];
    var hpos = cell.getAttribute('data-hpos');
    var vpos = cell.getAttribute('data-vpos');
    var color = frameCells[hpos][vpos].color;

    if (color === this.Colors.transparent) {
      cell.checked = false;
    }
    else {
      colored++;
      cell.checked = true;
    }
  }
};

// -----------------------------------------

ShadowPainter.prototype.createCodes = function () {
  this.addEvents(this.classNames.codesToggle, this.onClickCodes);
};

// -----------------------------------------

ShadowPainter.prototype.onClickCodes = function () {
  var textInit = this.Elems.codesToggle.getAttribute('data-init');
  var textClose = this.Elems.codesToggle.getAttribute('data-opened');
  var text = textInit;

  if (this.isCodeOpened) {
    this.isCodeOpened = false;
  }
  else {
    this.isCodeOpened = true;
    text = textClose;
  }

  this.Elems.codesToggle.innerHTML = text;
  this.Elems.codes.classList.toggle('is-open');

  this.Output.HTML = `<!-- ${this.Output.comment} -->\n<div class="box"><span class="dot"></span></div>`;

  this.Elems.codesCSS.innerHTML = `/*-- ${this.Output.comment} */\n${this.createOutputCSS()}`;
  this.Elems.codesHtml.innerHTML = this.Output.HTML;
};

// -----------------------------------------

ShadowPainter.prototype.createOutputCSS = function () {
  var styles = '';
  var dottes = this.Frames[0];
  var shadows = this.createShadow(dottes, true);

  this.setOutputParams();
  this.outputElemParams['.dot']['box-shadow'] = shadows;

  for (var elem in this.outputElemParams) {
    var className = elem;
    var elemStyles = '';
    var params = this.outputElemParams[elem];
    for (var item in params) {
      var value = addUnits(params[item], item);
      elemStyles += item + ': ' + value + ';\n';
    }
    styles += `${className} {\n${elemStyles}}\n`;
  }

  styles += '\n/* Keyframes */\n';

  var animation = `@keyframes shadows {\n${this.Output.Animation}\n}\n`;
  styles += animation;

  return styles;
};

// -----------------------------------------

ShadowPainter.prototype.createDurationInp = function () {
  var durationInt = this.Anim.duration.split('s').join('');
  this.Elems.durationInp.value = durationInt;

  this.addDataDefautlt(this.Elems.durationInp, durationInt);
  this.addOnChangeEvents(this.classNames.durationInp, this.onChangeDuration);
};

// -----------------------------------------

ShadowPainter.prototype.onChangeDuration = function (elem) {
  this.Anim.duration = elem.value + 's';
  this.paintShadow();
};

// -----------------------------------------

ShadowPainter.prototype.createSizeInp = function () {
  this.Elems.sizeInp.value = this.Scene.size;

  this.addDataDefautlt(this.Elems.sizeInp, this.Scene.size);
  this.addOnChangeEvents(this.classNames.sizeInp, this.onChangeSize);
};

// -----------------------------------------

ShadowPainter.prototype.onChangeSize = function (elem) {
  this.Scene.size = Number(elem.value);

  this.addConfig();
  this.paintShadow();
};

ShadowPainter.prototype.onChangeDots = function (elem) {
  this.Scene.oneSide = Number(elem.value);

  this.addConfig();
  this.createInputsSet();
  this.paintShadow();
};

// -----------------------------------------

ShadowPainter.prototype.createDotsInp = function () {
  this.Elems.dotsInp.value = this.Scene.oneSide;

  this.addDataDefautlt(this.Elems.dotsInp, this.Scene.oneSide);
  this.addOnChangeEvents(this.classNames.dotsInp, this.onChangeDots);
};

// -----------------------------------------

ShadowPainter.prototype.initColors = function() {
  const colors = {
    className: 'color',
    inputType: 'radio',
    inputClass: 'color__inp',
    inputData: 'data-color="{color}" ',

    labelContent: '',
    controlClass: 'colors-controls__item',
    transparent: 'rgba(255,255,255,0)',
    currentNum: 0,
    currentListNum: 0
  };

  colors.list = this.Palettes[colors.currentListNum];

  colors.current = colors.list[0];
  colors.classCurrent = `${colors.className}--${colors.currentNum}`;

  colors.StyleTempl = `.${colors.className}--{i} {background: {color};}\n`;
  colors.controlTempl = '<li class="{itemsClass} {itemsClass}-{direction}" data-direction="{direction}"></li>';

  colors.upDown = {
    list: {
      'up': '',
      'down': ''
    },
    replacements: {
      '{itemsClass}': colors.controlClass
    },
    template: '<li class="{itemsClass} {itemsClass}--{action}" data-action="{action}"></li>'
  };

  return colors;
};

// -----------------------------------------

ShadowPainter.prototype.initStep = function() {
  const step = {
    className: 'step',
    inputType: 'radio',
    inputClass: 'step__inp',
    inputData: '',
    labelContent: '{i+1}',
    controlClass: 'steps-control',
    clearFramesClass: 'frames-clear',

    currentNum: 0,
    customClass: '{customClass}',
    hiddenClass: 'is-hidden',
    disabledClass: 'is-disabled'
  };
  step.plusMinus = {
    list: {
      'minus': '&ndash;',
      'plus': '+'
    },
    replacements: {
      '{itemsClass}': step.controlClass
    },
    template: '<span class="{itemsClass} {itemsClass}--{action}" data-action="{action}">{text}</span>',
    insertBetween: 'this.Frames'
  };

  step.clearFrames = {
    list: {
      'current': 'Clear current frame',
      'all': 'Clear all frames'
    },
    replacements: {
      '{itemsClass}': step.clearFramesClass
    },
    template: '<span class="{itemsClass} {itemsClass}--{action}" data-action="{action}">{text}</span>'
  };

  return step;
};

// Helpers
// -----------------------------------------

function out(data, is_style, color) {
  var style;

  if (is_style) {
    color = color || 'orangered';
    style = 'color: ' + color + '; padding-left: 20px;';
    style = `color: ${color}; padding-left: 20px;`;
    data = `%c${data}`;
    console.log(data, style);
  }
  else {
    console.log(data);
  }
}

// -----------------------------------------

function addStylesElem(elemClass) {
  var elem = document.createElement('style');
  elem.classList.add(elemClass);
  var head = document.querySelector('head');
  head.appendChild(elem);
  return elem;
}

// -----------------------------------------

function findKeyFrames(name) {
  var keyFrames;
  var sheets = document.styleSheets;
  
  for (var i = 0; i < sheets.length; i++) {
    try {
      var stylesList = sheets[i].cssRules;
    
      for (var k = 0; k < stylesList.length; k++) {
        if (stylesList[k].name === name) {
          keyFrames = stylesList[k];
        }
      }  
    }
    catch {}
    
  }

  return keyFrames;
}

// -----------------------------------------

function checkClassDot(className) {
  if (className.indexOf('.') < 0) {
    className = '.' + className;
  }
  return className;
}

// -----------------------------------------

function strIsNAN(str) {
  str = str.replace(/-|\./g,'');
  str = str.split(' ').join('');
  return isNaN(str);
}

// -----------------------------------------

function addUnits(str) {
  str = String(str);
  var arr = str.split(' ');

  if (strIsNAN(str)) {
    return str;
  }

  if (arr.length > 1 &&
      arr[0].indexOf('px') < 0 &&
      arr[0].indexOf('em') < 0 &&
      arr[0].indexOf('%') < 0) {
    str = arr.join('px ') + 'px';
    return str;
  }

  if (str.indexOf('px') < 0 &&
      str.indexOf('em') < 0 &&
      arr[0].indexOf('%') < 0) {
    str += 'px';
  }

  return str;
}

// -----------------------------------------

function getValByKeyCode(elem, key, isShift) {
  var value = Number(elem.value);
  var min = elem.getAttribute('data-min');
  var max = elem.getAttribute('data-max');

  var step = isShift ? 10 : 1;

  if (key === 38) {
    if (value >= 0 &&
         value < 1 &&
         min < 1) {

      step = 0.1;
    }
    value += step;
  }
  else if (key === 40) {
    if (value > 0 &&
         value <= 1 &&
         min < 1) {

      step = 0.1;
    }
    value -= step;
  }

  if (value < min) {
    value = min;
  }
  else if (max !== null && value > max) {
    value = max;
  }
  else {
    if (value > 0 && value < 1) {
      value = value.toFixed(1);
    }
    else {
      value = value.toFixed();
    }
  }

  return value;
}

// -----------------------------------------

function valueSetDefaultIfNAN(elem) {
  var value = elem.value;
  var defaultValue = elem.getAttribute('data-default');
  if (isNaN(value)) {
    return defaultValue;
  }

  return false;
}

// -----------------------------------------

function minMaxDef(elem) {
  var min = elem.getAttribute('data-min');
  min = min === null ? 0 : Number(min);

  var max = elem.getAttribute('data-max');
  max = max === null ? 100 : Number(max);

  var value = elem.value;

  var out = value > max ? max : value < min ? min : false;
  return out;
}

// -----------------------------------------

function createTemplate(item) {
  var itemType = item.className;
  var inputType = item.inputType;
  var data_attr = item.inputData;
  var lblContent = item.labelContent;
  var itemCustomClass = item.customClass ? item.customClass : '';

  var itemInpClass = itemType + '__inp';
  var itemLblClass = itemType + '__lbl';

  var replacements = {
    '{inputType}': inputType,
    '{itemType}': itemType,
    '{itemClass}': itemType,
    '{itemLblClass}': itemLblClass,
    '{itemInpClass}': itemInpClass,
    '{lblContent}': lblContent
  };

  var itemInputTempl = `<input type="{inputType}" id="{itemType}-{i}" class="${itemInpClass}" name="{itemType}" data-{itemType}-num="{i}" ${data_attr}>`;//
  var itemLabelTempl = `<label for="{itemType}-{i}" class="{itemLblClass} {itemType}--{i}">{lblContent}</label>`;
  var itemTempl = `<li class="{itemType}${itemCustomClass}">${itemInputTempl}${itemLabelTempl}</li>`;

  var result = fillTemplate(itemTempl, replacements);

  return result;
}

// -----------------------------------------

function fillTemplate(dataStr, replacements) {
  for (var key in replacements) {
    var findStr = key;
    var replaceWithStr = replacements[key];

    dataStr = dataStr.split(findStr).join(replaceWithStr);
  }
  return dataStr;
}

// -----------------------------------------

function objLength(obj) {
  var count = 0;
  for (var key in obj) {
    count++;
  }
  return count;
}

// Init
// -----------------------------------------

var painter = new ShadowPainter();

painter.init();


              
            
!
999px

Console