euphorika-logo.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="euphorika-logo">
  <template>
    <style>
      :host {
        display: block;
        width: 100px;
        height: 100px;
      }

      svg {
        background: #ef2d56;
      }

      :host([monochrome]) svg {
        background: #000;
      }

      .rect {
        fill: #fff;
        stroke-width: 0;
        transition: transform 0.1s ease-in-out
      }

      svg:hover .rect-top,
      svg:hover .rect-bottom,
      svg[animated] .rect-top,
      svg[animated] .rect-bottom {
        transform: translateX(-4px);
      }

      svg:hover .rect-middle,
      svg[animated] .rect-middle {
        transform: translateX(4px);
      }
    </style>

    <svg id="euphorikaLogo" width="100%" height="100%"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <g>
        <title>[[title]]</title>
      	<rect class="rect rect-top" x="31" y="26" width="46" height="10" />
      	<rect class="rect rect-middle" x="23" y="45" width="46" height="10" />
      	<rect class="rect rect-bottom" x="31" y="64" width="46" height="10" />
      </g>
    </svg>
  </template>

  <script>
    /**
     * `euphorika-logo`
     * Animated SVG Logo euphorika communications UG
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class EuphorikaLogo extends Polymer.Element {
      static get is() { return 'euphorika-logo'; }

      static get properties() {
        return {
          title: {
            type: String,
            value: 'euphorika communications logo'
          }
        };
      }

      constructor() {
        super();
      }

      init() {
        this.$.euphorikaLogo.removeAttribute('animated');
      }

      animate() {
        this.$.euphorikaLogo.setAttribute('animated', null);
      }

    }

    window.customElements.define(EuphorikaLogo.is, EuphorikaLogo);
  </script>
</dom-module>