Chrome Logo

Done with canvas, has mouse events.

by secretgspot

HTML

<script src="http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js"></script>
<canvas height="168" id="canvas-logo" width="123" style="cursor: default; ">
    <a data-g-label="MAIN-NAV-HOME" href="index.html">
        <img alt="Kuzya" src="http://kuzya.com/_img/logo/logo.png">
    </a>
</canvas>

JavaScript

ChromeLogo = CClass(CanvasNode, {
  center_gradient: new Gradient({
    type: "radial",
    startX: 7,
    startY: -7,
    endRadius: 14,
    colorStops: [
      [1, "#005791"],
      [0.62, "#2284DC"],
      [0, "#86B9E2"]
    ]
  }),
  center_back: new Gradient({
    type: "radial",
    endRadius: 14,
    colorStops: [
      [0, "#D2D2D2"],
      [1, "#FFFFFF"]
    ]
  }),
  top_gradient: new Gradient({
    type: "radial",
    endRadius: 16,
    colorStops: [
      [0.15, "#F37C65"],
      [1, [243, 124, 90, 0]]
    ]
  }),
  highlight_gradient3: new Gradient({
    type: "radial",
    startX: 0,
    startY: 0,
    endRadius: 40,
    colorStops: [
      [1, "rgba(255,255,255,0)"],
      [0.4, "rgba(255,255,255,.4)"],
      [0, "rgba(255,255,255,0)"]
    ]
  }),
  highlight_gradient4: new Gradient({
    type: "radial",
    startX: 0,
    startY: 0,
    endRadius: 8,
    colorStops: [
      [1, "rgba(255,255,255,0)"],
      [0.4, "rgba(255,255,255,.5)"],
      [0, "rgba(255,255,255,0)"]
    ]
  }),
  highlight_gradient5: new Gradient({
    type: "radial",
    startX: 0,
    startY: 0,
    endRadius: 8,
    colorStops: [
      [1, "rgba(255,255,255,0)"],
      [0.5, "rgba(255,255,255,.9)"],
      [0, "rgba(255,255,255,0)"]
    ]
  }),
  initialize: function () {
    CanvasNode.initialize.call(this);
    this.scale = 0.78;
    this.catchMouse = false;
    this.textGlow = new Circle(30, {
      fill: this.highlight_gradient5,
      x: 22,
      y: 23,
      zIndex: 2
    });
    this.append(this.textGlow);
    this.center = new Circle(7.5, {
      fill: this.center_gradient,
      x: 22,
      y: 23,
      zIndex: 4,
      clip: true
    });
    this.centerBack = new Circle(9, {
      fill: this.center_back,
      x: 22,
      y: 23,
      zIndex: 3
    });
    this.border = new CanvasNode({
      zIndex: 2
    });
    this.mask = new CanvasNode({
      x: 22,
      y: 23
    });
    this.ch3 = new Circle(8, {
      fill: this.highlight_gradient4,
      scale: 0.1,
 ...