A Pen by Adel Tahri.

index.html

<h2>PixelDima Logo</h2>

<div class="color"></div>

	<div id="one"  class="icon">
     <div class="gr"></div>    
     <div  class="pix"></div>
     <div  class="lpix"></div>
  </div>

PixelDima-Logo.markdown

PixelDima Logo

A Pen by Adel Tahri on CodePen.

License.

script.js

/* JS for demo only */
var colors = ['fff', '2c3e50', '2980b9', '7f8c8d', 'f1c40f', 'd35400', '27ae60','e84c3c'];

colors.each(function (color) {
  $$('.color')[0].insert(
    '<div class="square" style="background: #' + color + '"></div>'
  );
});

$$('.color')[0].on('click', '.square', function(event, square) {
  background = square.getStyle('background');
    
  $$('.icon').each(function (dropdown) {
    dropdown.setStyle({'background' : background});
  });

});

/*
 * Original version at
 * http://red-team-design.com/making-html-dropdowns-not-suck
 */ 

style.scss

@import "compass";
html{min-height:100%;border:0px; margin:0px; padding:0px;}
body{background: #34495e;  color: #fff;
  text-align: center;} 

//Var 
$borde-radius-val:18%;
$box-bg:#e84c3c;
$color:#34495e;
//Mixin
@mixin border-radius($radius) {
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

.border {
  @include border-radius($borde-radius-val);
}

.color{
  top:200x;
  position:absolute;
  left:42%;top:75%;
    
}

@keyframes pulse{
	0%   {transform: scale(0.6);}
	50%  {transform:scale(0.65); }
  100% {transform: scale(0.6);}
}

#one{animation:pulse 1s infinite;}

.square {
  width: 15px;
  height: 15px;
  margin: .5em;
  display: inline-block;
  @include border-radius(34px) ;    
}

.icon{
  width: 198px;
  height: 198px;
  background-color: #E64C3B;
  @include border-radius(34px) ;  
  overflow: hidden;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  position:absolute;
}

.pix{
  width: 72.6px;
  height: 72.6px;
  background-color: #fff;
  position: absolute;
  top: 31.25%;
  left: 31.25%;
}

.lpix{
  width: 21px;
  height: 21px;
  background-color: #fff;
  position: absolute;
  left:67%;
  top:20%;
}

.gr{
  width: 134.457px;
  height: 134.457px;
  background-image: linear-gradient(
    to left,
    #E64C3B 10%,
    #8c372e );
  position: absolute;
  top: 34.25%;
  left: 44.25%;
  -webkit-transform: rotate(45deg);
  opacity:0.5;
}