Skip to content

Instantly share code, notes, and snippets.

@teetteet

teetteet/CSS-Robot-w--Spinning-Bow-Tie-w--InSide-Generator-Design.markdown

Created September 14, 2013 08:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save teetteet/6560011 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save teetteet/6560011 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by toto .
Raw
CSS-Robot-w--Spinning-Bow-Tie-w--InSide-Generator-Design.markdown

CSS Robot w/ Spinning Bow Tie w/ InSide Generator Design

i want to make a generative Robot. Plz contribute because i am to lame to finish.

I got the idea from Robert Dabi's Dribbble, you can get the link in the pen.

Decided to make it out of CSS and HTML, and added in a spinning bowtie and a flashing light, which you can only see in Firefox right now because it's dependent on pseudo element animations. CSS Robot Illustration taken from Robert Dabi Specifically his Dribbble His Twitter: soulja_de My Twitter: monstasaurous

A Pen by toto on CodePen.

License.

Raw
index.html
<div class="robot">
<p>
<div class="antena"></div>
<div class="face"></div>
<div id="fract" class="body">
<canvas id="canvas" width="92" height="58"></canvas>
</div>
<!--<div class="bowtie"></div>
--><div class="arms"></div>
<div class="legs"></div>
</div>
<div id="frame">
<div id="container">
<div id="options">
<div style='margin:1; padding: 0; border: none'>
Presset
<br>
<select id="selector" cols="12" onchange="selectorChange()">
</select>
<br><br>
Shape Script
<br>
<textarea id="script_input" rows="6" cols="12" onkeyup="scriptChange()"></textarea>
<br>
Shape Preview
<br><br>
<canvas id="preview" width="150" height="50" ></canvas>
<br>
Recursions
<div style='float: none; padding:0; margin: 0; border: none; width: 100%; text-align: center;'>
<div style='border: 0; padding:0; margin: 0;width: 31%;float: both;text-align: center;' >
<button width="20" onclick="$('iterations').textContent = Math.max( new Number( $('iterations').textContent ) - 1, 0 );">-</button>
</div>
<div style='border: 0; padding:0; margin: 0;width: 31%;float: both;text-align: center;' id="iterations" >2</div>
<div style='border: 0; padding:0; margin: 0;width: 31%;float: both;text-align: center;' >
<button width="20" onclick="$('iterations').textContent = Math.min( new Number( $('iterations').textContent ) + 1, 5 );">+</button>
</div>
</div>
<br>
<button id="genbutton" width="150" type="button" onclick="doit()">Generate</button></div>
</div>
<div id="fract">
<canvas id="canvas" width="150" height="100"></canvas>
</div>
<br>
</div>
</div>
Raw
script.js
/* A lot of forks here.
I wonder if somebody give me a better fork, with a nicer GUI.
Any maybe a solution for making a screenshot PNG.
Not sure why the bowtie looks so bad in Opera, maybe something about border-radius?
+
<span>CSS Robot</span>
<br>
Illustration taken from <a href="http://www.souljade.com/" target="_blank">Robert Dabi</a>
<br>
Specifically his <a href="http://dribbble.com/shots/664589-Wedding-Stamp" target="_blank">Dribbble</a>
<br>
His Twitter: <a href="https://twitter.com/soulja_de" target="_blank">soulja_de</a>
<br>
My Twitter: <a href="https://twitter.com/monstasaurous" target="_blank">monstasaurous</a>
</p>
*/
// forked from y3i12's "Holy Caffeine: The Strange Fractal Generator" http://jsdo.it/y3i12/strange_fract
var ctx;
var width = 0;
var height = 0;
var iterations = 2;
var current_fract;
var stack = [];
var the_command_list;
var the_timer;
// some useful definitions
var PI = 3.14159265;
var DEG_TO_RAD = 0.0174532925;
function StackItem( x, y, sz, a, l, i )
{
this.originX = x;
this.originY = y;
this.size = sz;
this.angle = a;
this.level = l;
this.index = i;
this.toString = function( )
{
return "{ x: " + this.originX + ", y: " + this.originY + ", sz: " + this.size + ", a: " + this.angle + ", l: " + this.level + ", i: " + this.index + "}";
};
}
function Fractal( n, s ) { this.name = n; this.script = s; }
// pre-defined fractals
var fracts = [ new Fractal( "I", "F0.5\nR90\nF0.5\nL180\nF0.5\nR90\nF0.5" ),
new Fractal( "+", "F0.5\nR90\nF0.250\nR90\nF0.250\nL180\nF0.250\nR90\nF0.250\nL180\nF0.250\nR90\nF0.250\nL180\nF0.250\nR90\nF0.250\nR90\nF0.5" ),
new Fractal( "+o", "F0.5\nR90\nF0.125\nR45\nF0.125\nR45\nF0.125\nL180\nF0.125\nR45\nF0.125\nR45\nF0.125\nL180\nF0.125\nR45\nF0.125\nR45\nF0.125\nL180\nF0.125\nR45\nF0.125\nR45\nF0.125\nR90\nF0.5\n" ),
new Fractal( "V", "F0.35\nR60\nF0.3\nL120\nF0.3\nR60\nF0.35" ),
new Fractal( "U", "F0.333\nR90\nF0.333\nL90\nF0.333\nL90\nF0.333\nR90\nF0.333" ),
new Fractal( "W", "F0.333\nR90\nF0.444\nL90\nF0.111\nL90\nF0.333\nR90\nF0.111\nR90\nF0.333\nL90\nF0.111\nL90\nF0.444\nR90\nF0.333" ),
new Fractal( "P", "F0.5\nR90\nF0.5\nL90\nF0.25\nL90\nF0.25\nL90\nF0.25\nR90\nF0.25\nR90\nF0.5" ),
new Fractal( "PI", "F0.25\nR90\nF0.5\nL90\nF0.25\nL90\nF0.25\nL90\nF0.25\nR90\nF0.25\nR90\nF0.5\nR90\nF0.5\nL180\nF0.5\nR90\nF0.25" ),
new Fractal( "T", "F0.45\nR90\nF0.250\nR90\nF0.125\nL90\nF0.1\nL90\nF0.350\nL90\nF0.1\nL90\nF0.125\nR90\nF0.250\nR90\nF0.45" ),
new Fractal( "A", "F0.5\nR120\nF0.25\nL180\nF0.25\nR120\nF0.25\nL180\nF0.25\nR120\nF0.5" ),
new Fractal( "Star", "F0.333\nR72\nF0.5\nL144\nF0.5\nL144\nF0.5\nL144\nF0.5\nL144\nF0.5\nR144\nF0.666" )];
function init( )
{
for ( var i = 0; i < fracts.length; ++i )
{
var opt = new Element("option");
opt.text = fracts[ i ].name;
$("selector").options.add( opt );
}
ctx = $("canvas").getContext("2d");
width = $("canvas").width;
height = $("canvas").height;
selectorChange();
}
function doit( )
{
if (the_timer)
{
clearTimeout(the_timer);
}
the_command_list = getCommandList( $("script_input").value );
stack = [];
ctx.width = ctx.width;
ctx.fillStyle = 'white';
ctx.fillRect( 0, 0, width, height );
iterations = new Number( $('iterations').textContent );
stack.push( new StackItem( 0, 0, width, 0, 0, 0 ) );
the_timer = setTimeout( stackFract, 0 );
}
function stackFract( )
{
try
{
var stack_item = stack[ stack.length - 1 ];
drawFractal( stack_item );
if ( stack.length )
{
the_timer = setTimeout( stackFract, 0 );
}
}
catch(err)
{
var txt = "There was an error on page.\n\n";
txt += "Error description: '" + err.toString() + "'\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
}
function getCommandList( the_fractal )
{
var command_lines = the_fractal.split('\n');
var command_list = [];
for (var i = command_lines.length - 1; i >= 0; i--) {
command_list[i] =
{
cmd: command_lines[i][0],
param: new Number( command_lines[i].substr(1) )
};
}
return command_list;
}
function drawFractal( a_item )
{
var the_stack = stack;
var command = the_command_list[ a_item.index ];
var new_item = new StackItem( a_item.originX, a_item.originY, a_item.size, a_item.angle, a_item.level, a_item.index );
stack.pop();
if ( command.cmd == 'L' )
{
new_item.angle -= command.param;
new_item.index++;
stack.push( new_item );
}
else if ( command.cmd == 'R' )
{
new_item.angle += command.param;
new_item.index++;
stack.push( new_item );
}
else if ( command.cmd == 'F' )
{
if ( iterations == new_item.level )
{
var new_size = new_item.size * command.param;
new_item.size = new_size;
drawItem( new_item, ctx, "#FFFF00" );
new_item.size = a_item.size;
new_item.index++;
new_item.originX += Math.cos( new_item.angle * DEG_TO_RAD ) * new_size;
new_item.originY += Math.sin( new_item.angle * DEG_TO_RAD ) * new_size;
if ( new_item.index + 1 < the_command_list.length )
{
stack.push( new_item );
}
}
else
{
var new_item_rec = new StackItem( new_item.originX, new_item.originY, new_item.size, new_item.angle, new_item.level, new_item.index );
//if ( ( new_item.level != 0 ) && ( new_item.index + 1 < the_command_list.length ) )
if ( new_item.index + 1 < the_command_list.length )
{
new_size = new_item.size * command.param;
new_item.index++;
new_item.originX += Math.cos( new_item.angle * DEG_TO_RAD ) * new_size;//new_item.size;// * command.param;
new_item.originY += Math.sin( new_item.angle * DEG_TO_RAD ) * new_size;//new_item.size;// * command.param;
stack.push( new_item );
}
new_item_rec.index = 0;
new_item_rec.size *= command.param;
new_item_rec.level++;
stack.push( new_item_rec );
}
}
}
function drawPreview( a_string )
{
command_list = getCommandList( a_string );
var prv = $("preview").getContext("2d");
var w = $("preview").width;
prv.width = prv.width;
prv.fillStyle = 'white';
prv.fillRect( 0, 0, $("preview").width, $("preview").height );
var item = new StackItem( 0, 0, 0, 0, 0, 0 );
for ( var i = 0; i < command_list.length; ++i )
{
var command = command_list[ i ];
if ( command.cmd == 'L' )
{
item.angle -= command.param;
item.index++;
}
else if ( command.cmd == 'R' )
{
item.angle += command.param;
item.index++;
}
else if ( command.cmd == 'F' )
{
item.size = w * command.param;
drawItem( item, prv );
item.index++;
item.originX += Math.cos( item.angle * DEG_TO_RAD ) * item.size;
item.originY += Math.sin( item.angle * DEG_TO_RAD ) * item.size;
}
}
}
function drawItem( a_item, the_context, stroke )
{
var dx = Math.cos( a_item.angle * DEG_TO_RAD );
var dy = Math.sin( a_item.angle * DEG_TO_RAD );
drawLine( the_context, a_item.originX, a_item.originY, a_item.originX + dx * a_item.size, a_item.originY + dy * a_item.size );
}
function drawLine( context, x, y, x2, y2, the_stroke_style )
{
context.beginPath();
if ( the_stroke_style )
{
context.strokeStyle = the_stroke_style;
}
else
{
context.strokeStyle = "#4F4F4F";
}
//the_context.strokeStyle = "#00FF00";
context.moveTo( x, y );
context.lineTo( x2, y2 );
context.stroke( ); // chama a funcao de desenhar para o path criado acima
context.closePath( );
}
// for the events
function selectorChange()
{
$("script_input").value = fracts[ $("selector").selectedIndex ].script;
scriptChange();
}
function scriptChange()
{
drawPreview( $("script_input").value );
}
init();
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Karla:400,700);
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
font-weight: bold;
}
a:hover {
font-weight: normal;
}
.robot {
position: relative;
height: 75px;
width: 100px;
margin: 55px auto;
border: 5px solid #4F4F4F;
border-radius: 8px;
/* This box shadow is his neck */
box-shadow: 0px 40px 0px -32px #4F4F4F;
}
.robot:before {
content: '';
position: absolute;
top: 17px;
left: -13px;
width: 13px;
height: 25px;
border: 5px solid #4F4F4F;
border-radius: 13px 0px 0px 13px;
}
.robot:after {
content: '';
position: absolute;
top: 17px;
left: 90px;
width: 13px;
height: 25px;
border: 5px solid #4F4F4F;
border-radius: 0px 13px 13px 0px;
}
.robot p {
position: absolute;
top: -30px;
left: -330px;
text-indent: -10px;
font-family: 'Karla';
}
.robot p span {
font-family: helvetica;
font-size: 3em;
letter-spacing: 4px;
font-weight: bold;
color: #333333;
text-shadow: 1px 1px #545454,
2px 2px #545454,
3px 3px #4C4C4C,
4px 4px #4C4C4C,
5px 5px #858585,
6px 6px #858585,
7px 7px #BFBFBF,
8px 8px #BFBFBF;
}
.antena {
position: absolute;
top: -20px;
left: 30px;
width: 30px;
height: 20px;
border: 5px solid #4F4F4F;
border-radius: 15px 15px 0px 0px;
}
.antena:before {
content: '';
position: absolute;
left: 7px;
top: -20px;
width: 5px;
height: 15px;
background-color: #4F4F4F;
}
.antena:after {
content: '';
position: absolute;
top: -36px;
left: -1px;
width: 21px;
height: 21px;
border: 5px solid #4F4F4F;
border-radius: 21px;
}
.face {
position: absolute;
left: 13px;
top: 18px;
height: 4px;
width: 4px;
background-color: #fff;
border-radius: 12px;
box-shadow: 2px 2px 0px 5px #4F4F4F;
}
.face:before {
content: '';
position: absolute;
top: 0px;
left: 50px;
height: 4px;
width: 4px;
background-color: #fff;
border-radius: 4px;
box-shadow: 2px 2px 0px 5px #4F4F4F;
}
.face:after {
content: '';
position: absolute;
top: 28px;
left: -5px;
width: 75px;
height: 5px;
background-color: #4F4F4F;
border-radius: 5px;
}
.body {
position: absolute;
top: 73px;
left: -5px;
height: 65px;
width: 100px;
border: 5px solid #4F4F4F;
border-radius: 8px;
}
/**.body:before {
content: '';
position: absolute;
top: 7px;
left: 68px;
height: 14px;
width: 14px;
background-color: none;
border: 2px solid #4F4F4F;
border-radius: 15px;
box-shadow: 0px 16px 0px -1px #4F4F4F;
-webkit-animation: lights 20s infinite;
-moz-animation: lights 20s infinite;
-ms-animation: lights 20s infinite;
-o-animation: lights 20s infinite;
}
**/
.bowtie {
position: absolute;
top: 82px;
left: 38px;
height: 16px;
width: 16px;
background-color: #4F4F4F;
border-radius: 16px;
-webkit-animation: spin 20s infinite;
-moz-animation: spin 20s infinite;
-ms-animation: spin 20s infinite;
-0-animation: spin 20s infinite;
}
.bowtie:before {
content: '';
position: absolute;
top: -2px;
left: -8px;
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 18px solid #4F4F4F;
border-radius: 3px;
}
.bowtie:after {
content: '';
position: absolute;
top: -2px;
left: 6px;
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-right: 18px solid #4F4F4F;
border-bottom: 10px solid transparent;
border-radius: 3px;
}
.arms {
position: absolute;
top: 81px;
left: 93px;
height: 45px;
width: 20px;
border: 5px solid #4F4F4F;
border-left: none;
border-bottom: none;
border-radius: 0px 50px 0px 0px;
}
.arms:before {
content: '';
position: absolute;
top: -5px;
left: -116px;
height: 45px;
width: 20px;
border: 5px solid #4F4F4F;
border-right: none;
border-bottom: none;
border-radius: 50px 0px 0px 0px;
}
.arms:after {
content: '';
position: absolute;
top: 39px;
left: 4px;
height: 26px;
width: 26px;
border: 5px solid #4F4F4F;
border-radius: 26px;
box-shadow: -130px 0px 0px -5px #fff,
-130px 0px 0px 0px #4F4F4F;
}
.legs {
position: absolute;
top: 138px;
left: 1px;
height: 41px;
width: 35px;
border: 5px solid #4F4F4F;
box-shadow: 53px 0px 0px -5px #fff,
53px 0px 0px 0px #4F4F4F;
}
.legs:before {
content: '';
position: absolute;
top: 31px;
left: -8px;
height: 17px;
width: 41px;
border: 5px solid #4F4F4F;
}
.legs:after {
content: '';
position: absolute;
top: 31px;
left: 45px;
height: 17px;
width: 41px;
border: 5px solid #4F4F4F;
}
@-webkit-keyframes spin {
from, to {
-webkit-transform: rotate(0deg);
}
5% {
-webkit-transform: rotate(0deg);
}
15% {
-webkit-transform: rotate(720deg);
}
16% {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes spin {
from, to {
-moz-transform: rotate(0deg);
}
5% {
-moz-transform: rotate(0deg);
}
15% {
-moz-transform: rotate(720deg);
}
16% {
-moz-transform: rotate(0deg);
}
}
@-ms-keyframes spin {
from, to {
-ms-transform: rotate(0deg);
}
5% {
-ms-transform: rotate(0deg);
}
15% {
-ms-transform: rotate(720deg);
}
16% {
-ms-transform: rotate(0deg);
}
}
@-o-keyframes spin {
from, to {
-o-transform: rotate(0deg);
}
5% {
-o-transform: rotate(0deg);
}
15% {
-o-transform: rotate(720deg);
}
16% {
-o-transform: rotate(0deg);
}
}
/* Only works in Firefox right now */
@-webkit-keyframes lights {
from, to {
background-color: none;
border: 2px solid #4F4F4F;
box-shadow: 0px 16px 0px -1px #4F4F4F;
}
20% {
background-color: #4F4F4F;
}
25% {
background-color: none;
}
}
@-moz-keyframes lights {
from, to {
background-color: none;
border: 2px solid #4F4F4F;
box-shadow: 0px 16px 0px -1px #4F4F4F;
}
20% {
background-color: #4F4F4F;
}
25% {
background-color: none;
}
}
@-ms-keyframes lights {
from, to {
background-color: none;
border: 2px solid #4F4F4F;
box-shadow: 0px 16px 0px -1px #4F4F4F;
}
20% {
background-color: #4F4F4F;
}
25% {
background-color: none;
}
}
@-o-keyframes lights {
from, to {
background-color: none;
border: 2px solid #4F4F4F;
box-shadow: 0px 16px 0px -1px #4F4F4F;
}
3s {
background-color: none;
}
4s {
background-color: #4F4F4F;
}
5s {
background-color: none;
}
}
/*GENERATOR*/
div#frame
{
margin: 0;
border: none;
padding: 0;
display: block;
text-align: center;
vertical-align: middle;
width: 100%;
height: 150%;
float: none;
}
div#container
{
border: none;
margin: 1em;
padding: 0;
float: none;
display: block;
}
div#options
{
position: relative;
float: left;
}
div#fract
{
vertical-align: middle;
height: 65px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment