{
  "$type": "site.standard.document",
  "canonicalUrl": "https://oli.zilla.org.uk/2014/06/14/animated-css-logo-for-nodebots",
  "description": "An animated, pure CSS drawing of the Nodebots logo featuring a blinking eye animation.",
  "path": "/2014/06/14/animated-css-logo-for-nodebots",
  "publishedAt": "2014-06-14T00:00:00.000Z",
  "site": "at://did:plc:2ngsl5btroik454wzz7vpbzq/site.standard.publication/3mn67n3cam32w",
  "textContent": "Animated CSS logo for nodebots\n\n<style>\n.nodebot{\n  margin:0;\n  z-index:2;\n  opacity: 1;\n  width:300px;\n  height:300px;\n  background-color: #F8E01E;\n  position:relative;\n}\n.nodebot .icon{\n  position:absolute;\n  bottom:8%;\n  right:8%;\n  width:45.6%;\n  height:50%;\n}\n.nodebot .icon  {\n  background: #2e2e2c;\n}\n.nodebot .icon .bobble{\n  width:12.5%;\n  height:12%;\n  border-radius: 100%;    \n  margin:5% auto -3.8%;\n}\n.nodebot .antenna{\n  width:6%;\n  margin:0 auto 4%;\n  height:16.5%;\n  border-bottom-left-radius: 80% 30%;\n  border-bottom-right-radius: 80% 30%;\n}\n.nodebot .head{\n  width: 100%;\n  height: 48.5%;\n  border-top-left-radius: 15% 25%;\n  border-top-right-radius: 15% 25%;\n  position:relative;\n}\n.nodebot .head .eye{\n  width:18%;\n  height:33.5%;\n  margin:0 18.2%;\n  border-radius: 100%;\n  background-color: #F8E01E;  \n  display: inline-block;\n  position:absolute;\n  top:26%;\n  left: 0px;\n  -webkit-animation: blink 5s 2s infinite;\n          animation: blink 5s 2s infinite\n}\n.nodebot .eye.right{\n  left: auto;\n  right:0;\n}\n.nodebot .head .eye.blink {\n  height: 6%;\n  top:36%;\n  border-radius: 0;\n  background-color: #000;  \n}\n.nodebot .neck{\n  border-radius: 20px;    \n  width: 69%;\n  height: 6%;\n  margin: 3.6% auto 0;\n}\n.nodebot .neck:last-child{\n  width: 48%;\n}\n\n@-webkit-keyframes blink {\n  0%, 4%, 8%, 100%{\n    height:33.5%;\n    border-radius: 100%;\n    background-color: #F8E01E;  \n    top:26%;\n  }\n  2%, 6% {\n    height: 6%;\n    top:36%;\n    border-radius: 0;\n    background-color: #000;\n  }\n}\n\n@keyframes blink {\n  0%, 4%, 8%, 100%{\n    height:33.5%;\n    border-radius: 100%;\n    background-color: #F8E01E;  \n    top:26%;\n  }\n  2%, 6% {\n    height: 6%;\n    top:36%;\n    border-radius: 0;\n    background-color: #000;\n  }\n}\n</style>\n<div class=\"nodebot\">\n  <div class=\"icon\">\n    <div class=\"bobble\"></div>\n    <div class=\"antenna\"></div>\n    <div class=\"head\">\n      <div class=\"eye left\"></div>\n      <div class=\"eye right\"></div>\n    </div>\n    <div class=\"neck\"></div>\n    <div class=\"neck\"></div>\n  </div>\n</div>",
  "title": "Animated CSS logo for nodebots"
}