Fire JS Bin - Flags-of-the-World - 6

You can jump to the latest bin by adding /latest to your URL

z

Find

⟲

Replace

⊗ All Replace

(function (I) {
  var s = Math,
      K, P = "http://www.w3.org/2000/svg",
      ab = "http://www.w3.org/1999/xlink",
      w = function (d, c, b) {
      return $(document.createElementNS(P, d)).a(c || {}).aT(b)
      },
      U = "fff",
      Z = "ce1126",
      Y = "fcd116",
      aa = "000080",
      W = "002868",
      S = "007a3d",
      R = "008751",
      Q = "c10000",
      X = {
      Netherlands: {
        v: [9, 6, "AE1C28"],
        r: [
          [0, 2, 9, 2, U],
          [0, 4, 9, 2, "21468B"]
        ]
      },
      Belgium: {
        v: [15, 13, 0],
        r: [
          [5, 0, 5, 13, "ffde00"],
          [10, 0, 5, 13, "e00"]
        ]
      },
      Armenia: {
        v: [6, 3, "f00"],
        r: [
          [0, 1, 6, 1, "00a"],
          [0, 2, 6, 1, "f90"]
        ]
      },
      Gabon: {
        v: [4, 3, "36A100"],
        r: [
          [0, 1, 4, 1, "FFE700"],
          [0, 2, 4, 1, "006DBC"]
        ]
      },
      France: {
        v: [3, 2, "00209F"],
        r: [
          [1, 0, 1, 2, U],
          [2, 0, 1, 2, "F42A41"]
        ]
      },
      Germany: {
        v: [5, 3, 0],
        r: [
          [0, 1, 5, 1, "D00"],
          [0, 2, 5, 1, "FFCE00"]
        ]
      },
      Libya: {
        v: [2, 1, "009530"],
        r: []
      },
      Romania: {
        v: [3, 2, "002B7F"],
        r: [
          [1, 0, 1, 2, Y],
          [2, 0, 1, 2, Z]
        ]
      },
      Sweden: {
        v: [16, 10, "0b5089"],
        r: [
          [5, 0, 2, 10, "ffc100"],
          [0, 4, 16, 2, "ffc100"]
        ]
      },
      Yemen: {
        v: [9, 6, "f10600"],
        r: [
          [0, 2, 9, 2, U],
          [0, 4, 9, 2, ""]
        ]
      },
      Italy: {
        v: [3, 2, "005700"],
        r: [
          [1, 0, 1, 2, U],
          [2, 0, 1, 2, "fc0000"]
        ]
      },
      Russia: {
        v: [9, 6, U],
        r: [
          [0, 2, 9, 2, "01017e"],
          [0, 4, 9, 2, "fe0101"]
        ]
      },
      Finland: {
        v: [18, 11, U],
        r: [
          [0, 4, 18, 3, "003580"],
          [5, 0, 3, 11, "003580"]
        ]
      },
      Ukraine: {
        v: [3, 2, "005BBB"],
        r: [
          [0, 1, 3, 1, "FFD500"]
        ]
      },
      Indonesia: {
        v: [3, 2, Z],
        r: [
          [0, 1, 3, 1, U]
        ]
      },
      Poland: {
        v: [3, 2, U],
        r: [
          [0, 1, 3, 1, "df0000"]
        ]
      },
      Denmark: {
        v: [37, 28, "d00c33"],
        r: [
          [12, 0, 4, 28, U],
          [0, 12, 37, 4, U]
        ]
      },
      Nigeria: {
        v: [6, 3, R],
        r: [
          [2, 0, 2, 3, U]
        ]
      },
      Bangladesh: {
        v: [10, 6, "006a4e"],
        c: [4.5, 3, 2, "f42a41"]
      },
      Japan: {
        v: [9, 6, U],
        c: [4.5, 3, 1.8, "bc002d"]
      },
      Colombia: {
        v: [6, 4, Y],
        r: [
          [0, 2, 6, 1, "003893"],
          [0, 3, 6, 1, Z]
        ]
      },
      Benin: {
        v: [15, 10, Y],
        r: [
          [0, 5, 15, 5, "e8112d"],
          [0, 0, 6, 10, R]
        ]
      },
      Switzerland: {
        v: [32, 32, "f00"],
        r: [
          [6, 13, 20, 6, U],
          [13, 6, 6, 20, U]
        ]
      },
      Republic_of_the_Congo: {
        v: [3, 2, "009543"],
        p: [
          ["0,2L2,0h1v2", "FBDE4A"],
          ["3,0v2h-2", "DC241F"]
        ]
      },
      Czech_Republic: {
        v: [6, 4, "d7141a"],
        r: [
          [0, 0, 6, 2, U]
        ],
        p: [
          ["3,2L0,0v4", "11457e"]
        ]
      },
      Thailand: {
        v: [9, 6, "de1018"],
        r: [
          [0, 1, 9, 4, U],
          [0, 2, 9, 2, "00247d"]
        ]
      },
      Sudan: {
        v: [12, 6, "D21034"],
        r: [
          [0, 2, 12, 2, U],
          [0, 4, 12, 2, 0]
        ],
        p: [
          ["0,0 4,3 0,6", "007229"]
        ]
      },
      Peru: {
        v: [9, 6, "DA121A"],
        r: [
          [3, 0, 3, 6, U]
        ]
      },
      Ivory_Coast: {
        v: [15, 10, U],
        r: [
          [0, 0, 5, 10, "f77f00"],
          [10, 0, 5, 10, "009e60"]
        ]
      },
      Niger: {
        v: [7, 6, U],
        r: [
          [0, 0, 7, 2, "E05206"],
          [0, 4, 7, 2, "0DB02B"]
        ],
        c: [3.5, 3, 0.85, "E05206"]
      },
      Mali: {
        v: [3, 2, "14b53a"],
        r: [
          [1, 0, 1, 2, Y],
          [2, 0, 1, 2, Z]
        ]
      },
      Guinea: {
        v: [3, 2, Z],
        r: [
          [1, 0, 1, 2, Y],
          [2, 0, 1, 2, "009460"]
        ]
      },
      Bolivia: {
        v: [22, 15, Z],
        r: [
          [0, 5, 22, 5, "f9d616"],
          [0, 10, 22, 5, S]
        ]
      },
      Hungary: {
        v: [9, 6, Z],
        r: [
          [0, 2, 9, 2, R],
          [0, 4, 9, 2, U]
        ]
      },
      Austria: {
        v: [9, 6, "ed2939"],
        r: [
          [0, 2, 9, 2, U]
        ]
      },
      Bulgaria: {
        v: [5, 3, U],
        r: [
          [0, 1, 5, 2, "00966E"],
          [0, 2, 5, 1, "D62612"]
        ]
      },
      Laos: {
        v: [6, 4, Z],
        r: [
          [0, 1, 6, 2, W]
        ],
        c: [3, 2, 0.8, U]
      },
      Sierra_Leone: {
        v: [9, 6, "1EB53A"],
        r: [
          [0, 2, 9, 2, U],
          [0, 4, 9, 2, "0072C6"]
        ]
      },
      Norway: {
        v: [11, 8, "ef2b2d"],
        r: [
          [3, 0, 2, 8, U],
          [0, 3, 11, 2, U],
          [3.5, 0, 1, 8, W],
          [0, 3.5, 11, 1, W]
        ]
      },
      United_Arab_Emirates: {
        v: [12, 6, Z],
        r: [
          [3, 0, 9, 2, "009a00"],
          [3, 2, 9, 2, U],
          [3, 4, 9, 2, 0]
        ]
      },
      Costa_Rica: {
        v: [5, 3, "002b7f"],
        r: [
          [0, 0.5, 5, 2, U],
          [0, 1, 5, 1, Z]
        ]
      },
      Palestine: {
        v: [6, 3, 0],
        r: [
          [0, 1, 6, 1, U],
          [0, 2, 6, 1, S]
        ],
        p: [
          ["0,0 0,3 1.5,1.5", Z]
        ]
      },
      Kuwait: {
        v: [6, 3, "009900"],
        r: [
          [0, 1, 6, 1, U],
          [0, 2, 6, 1, Z]
        ],
        p: [
          ["0,0 1.5,1 1.5,2 0,3", 0]
        ]
      },
      Latvia: {
        v: [6, 3, "9E3039"],
        r: [
          [0, 1.2, 6, 0.6, U]
        ]
      },
      Botswana: {
        v: [36, 24, "75aadb"],
        r: [
          [0, 9, 36, 6, U],
          [0, 10, 36, 4, 0]
        ]
      },
      Gambia: {
        v: [27, 18, Z],
        r: [
          [0, 6, 27, 6, U],
          [0, 7, 27, 4, "0c1c8c"],
          [0, 12, 27, 6, "3a7728"]
        ]
      },
      Trinidad_and_Tobago: {
        v: [30, 18, Z],
        p: [
          ["0,0 20.8,18 30,18 9,0", U],
          ["1.5,0 22.5,18 28.5,18 7.5,0", 0]
        ]
      },
      Estonia: {
        v: [33, 21, "4891d9"],
        r: [
          [0, 7, 33, 14, 0],
          [0, 14, 33, 7, U]
        ]
      },
      Mauritius: {
        v: [6, 4, "dc181e"],
        r: [
          [0, 1, 6, 1, "012a87"],
          [0, 2, 6, 1, "fceb0f"],
          [0, 3, 6, 1, "169253"]
        ]
      },
      Lithuania: {
        v: [5, 3, "dc181e"],
        r: [
          [0, 0, 5, 3, "fdb913"],
          [0, 1.5, 5, 1.5, "c1272d"],
          [0, 1, 5, 1, "006a44"]
        ]
      },
      Madagascar: {
        v: [3, 2, U],
        r: [
          [1, 0, 2, 2, "fc3d32"],
          [1, 1, 2, 1, "007e3a"]
        ]
      },
      Greece: {
        v: [27, 18, aa],
        r: [
          [0, 2, 27, 14, U],
          [0, 4, 27, 10, aa],
          [0, 6, 27, 6, U],
          [0, 8, 27, 2, aa],
          [0, 0, 10, 10, aa],
          [4, 0, 2, 10, U],
          [0, 4, 10, 2, U]
        ]
      },
      Luxembourg: {
        v: [5, 3, "ed2939"],
        r: [
          [0, 1, 5, 1, U],
          [0, 2, 5, 1, "00A1DE"]
        ]
      },
      Bahamas: {
        v: [6, 3, "00ABC9"],
        r: [
          [0, 1, 6, 1, "FAE042"]
        ],
        p: [
          ["0,0 0,3 2.5,1.5"]
        ]
      },
      Iceland: {
        v: [25, 18, "003897"],
        r: [
          [7, 0, 4, 18, U],
          [0, 7, 25, 4, U],
          [8, 0, 2, 18, "d72828"],
          [0, 8, 25, 2, "d72828"]
        ]
      },
      Tonga: {
        v: [96, 48, Q],
        r: [
          [0, 0, 40, 24, U],
          [17, 3, 6, 18, Q],
          [11, 9, 18, 6, Q]
        ]
      },
      Seychelles: {
        v: [6, 3, "d62828"],
        p: [
          ["0,0 4,0 0,3", "fcd856"],
          ["6,1 6,3 0,3", U],
          ["0,0 2,0 0,3", "003f87"],
          ["6,2 6,3 0,3", S]
        ]
      },
      Palau: {
        v: [8, 5, "4aadd6"],
        c: [3.5, 2.5, 1.5, "ffde00"]
      },
      Jamaica: {
        v: [12, 6, "f9da00"],
        p: [
          ["1,0 6,2.5 11,0M1,6 6,3.5 11,6", "308a2a"],
          ["0,.5 5.25,3 0,5.5M12,.5 6.75,3 12,5.5", 0]
        ]
      },
      Greenland: {
        v: [18, 12, U],
        r: [
          [0, 6, 18, 6, "d00c33"]
        ],
        p: [
          ["3,6a4,4 0 0,1 8,0", "d00c33"],
          ["3,6a4,4 0 0,0 8,0", U]
        ]
      }
      };
  var L = null;
  var C = $("li");
  var D = localStorage;
  var m = 0,
      E = $.fn;
  E.ap = E.append;
  E.aT = E.appendTo;
  E.rc = E.removeClass;
  E.t = E.text;
  E.s = E.show;
  E.a = function (d) {
    for (var c in d) {
      var b = d[c];
      if (c.indexOf("xlink") == 0) {
        this[0].setAttributeNS(ab, c, b)
      } else {
        c = c == 0 ? "width" : c == 1 ? "height" : c == 2 ? "opacity" : c == 3 ? "fill" : c;
        this[0].setAttribute(c, b)
      }
    }
    return this
  };
  E.r = function (b) {
    this[0].removeAttribute(b);
    return this
  };
  $(I).keyup(function (h) {
    var g = $("li.s");

function c() {
      C.rc("s").eq(L).addClass("s")
    }
    function b() {
      if (L == null) {
        L = 1
      }
      L--;
      if (L < 0) {
        L = 0
      }
      c()
    }
    function f() {
      if (L == null) {
        L = -1
      }
      L++;
      if (L >= C.length) {
        L = C.length - 1
      }
      c()
    }
    var d = h.which;
    if (d == 38) {
      b()
    } else {
      if (d == 40) {
        f()
      } else {
        if (d == 13 || d == 32) {
          $("li.s").click()
        } else {
          if (d > 48 && d < 52) {
            L = d - 49;
            c();
            $("li.s").click()
          }
        }
      }
    }
  }).resize(function () {
    if (!K) {
      K = setTimeout(function () {
        k();
        K = 0
      }, 1000)
    }
  });
  var A = w("svg", {
    xmlns: P,
    "xmlns:xlink": ab
  }, "#c"),
      u = w("defs", 0, A),
      a = 25,
      r = 16,
      p = 100,
      t = 70,
      v = w("use", {}, A).click(function () {
      if (I.btoa) {
        var c = $("#" + B);
        var b = c.find("rect").last().remove();
        var d = new XMLSerializer().serializeToString(c[0]).replace(/<svg(?!.*xmlns)/, '<svg xmlns="' + P + '"');
        open("data:image/svg+xml;base64," + btoa(d));
        c.ap(b)
      }
    });
  if (I.btoa) {
    v.css("cursor", I.btoa ? "pointer" : "").a({
      title: "Click to view flag as SVG"
    })
  }
  w("rect", {
    x: "50%",
    y: "20%",
    0: "45%",
    1: 230,
    rx: 30,
    ry: 30,
    2: 0.7
  }, A);
  var x = [];
  for (var Q in X) {
    var H = X[Q];
    H.r = H.r || [];
    H.r.splice(0, 0, [0, 0, H.v[0], H.v[1], H.v[2]]);
    H.v = H.v[0] + " " + H.v[1];
    x.push(Q);
    y(H);
    m[0].id = Q;
    X[Q].svg = m
  }
  var B;
  var J = x.length,
      j = 0,
      T = 0,
      V = 0,
      z = 0;
  var G = -1;
  var F;
  var N = w("linearGradient", {
    y2: 1,
    x2: 0,
    id: "g"
  }, u);
  w("stop", {
    "stop-color": "#fff",
    offset: 0
  }, N);
  w("stop", {
    "stop-color": "#888",
    offset: 0.5,
    "stop-opacity": 0
  }, N);
  w("stop", {
    "stop-color": "#000",
    offset: 1
  }, N);
  $("li").click(function () {
    if (!z && !$("#o:visible").length) {
      v.stop(1, 1);
      z = 1;
      var l = $(this).attr("d");
      var i = l == B;
      result = i ? "Correct!" : "Oops, wrong. That was " + B.replace(/_/g, " ");
      if (!i) {
        V = 0
      } else {
        T++;
        V++;
        var f = (new Date().getTime() - F) / 1000;
        var b = s.round(s.max(4 - f, 1) * V)
      }
      j += i ? b : 0;
      var h = $("#s2");
      $("#s1").t(j);
      if (j > h.t()) {
        h.t(j);
        D.setItem("h", j)
      }
      var e = $("#n").clone();
      $("#n").replaceWith(e).remove();
      e.t(result).css({
        color: i ? "lime" : "red",
        opacity: 1
      }).s().delay(4000).fadeOut();
      var c = v.clone().r("opacity").s();
      A.ap(c);
      v.hide();
      setTimeout(function () {
        c.fadeOut(function () {
          c.remove();
          z = 0;
          v.s();
          q()
        })
      }, 500)
    }
  }).mouseover(function () {
    var b = $(this);
    C.rc("s");
    b.addClass("s");
    L = b.index()
  }).mouseout(function () {
    $(this).rc("s");
    L = null
  });
  $("#d input").click(function () {
    q();
    $("#x").s();
    $("#o,#d").hide()
  });
  $("#x input").click(function () {
    O(x);
    $("#o").hide();
    j = V = T = 0;
    G = -1;
    $("#s1").t(0);
    q()
  });

function o(c) {
    var b = s.floor(s.random() * J);
    return $.inArray(x[b], c) != -1 ? o(c) : x[b]
  }
  function k() {
    var b = $(I).width();
    var i = $(I).height();
    if (b > 1024) {
      a = 39;
      r = 26
    }
    var n = a,
        e = r;
    var d = b / n;
    var c = i / e;
    $("g").remove();
    var f = w("g", {
      2: 0.2
    }, A).prependTo(A);
    var M = 0,
        l = 0;
    while (M < c + 1) {
      O(x);
      $.each(x, function () {
        if (l > d) {
          M++;
          l = 0
        }
        var g = l * n + 1,
            ad = M * e + 1;
        var h = this;
        if (g > 50 && g < b * 0.4 && ad > 50 && ad < i - 50) {
          h += " y"
        }
        var ac = w("use", {
          "xlink:href": "#" + this,
          x: g,
          y: ad,
          0: n,
          1: e,
          "class": h
        }, f);
        l++
      })
    }
  }
  k();
  $("#s2").t(D.getItem("h") || 0);

function y(c) {
    m = w("svg", {
      viewBox: "0 0 " + c.v
    }, u);
    $.each(c.r, function (d, b) {
      w("rect", {
        x: b[0],
        y: b[1],
        0: b[2],
        1: b[3],
        3: "#" + b[4]
      }, m)
    });
    if (c.c) {
      w("circle", {
        cx: c.c[0],
        cy: c.c[1],
        r: c.c[2],
        3: "#" + c.c[3]
      }, m)
    }
    if (c.p) {
      $.each(c.p, function (d, b) {
        w("path", {
          d: "M" + b[0],
          3: "#" + b[1]
        }, m)
      })
    }
    w("rect", {
      0: "100%",
      1: "100%",
      3: "url(#g)",
      2: 0.2
    }, m)
  }
  function O(b) {
    var d = b.length;
    if (!d) {
      return false
    }
    while (--d) {
      var c = s.floor(s.random() * (d + 1));
      var f = b[d];
      var e = b[c];
      b[d] = e;
      b[c] = f
    }
  }
  function q() {
    var l = B;
    G++;
    B = x[G];
    if (G >= J) {
      $("#o").s().find("b").t(j + " (" + s.round(T / J * 100) + "% correct)");
      return
    }
    var M = $(I).width();
    var ad = $(".y." + B);
    O(ad);
    var d = ad[0];
    if (!d) {
      q();
      return
    }
    var h = d.x.baseVal.value,
        f = d.y.baseVal.value;
    var e = h + a / 2,
        c = f + r / 2;
    F = new Date().getTime();
    v.a({
      "xlink:href": "#" + B,
      0: a,
      1: r,
      x: h,
      y: f,
      2: 1,
      transform: ""
    }).css({
      cursor: 0,
      opacity: 0
    }).animate({
      opacity: 1
    }, {
      queue: true,
      duration: 1000
    }).delay(500).animate({
      cursor: 1
    }, {
      step: function (i) {
        i *= 3;
        v.a({
          transform: "translate(" + (-e * i) + "," + (-c * i) + ") scale(" + (i + 1) + ")"
        })
      },
      duration: 1000,
      queue: true
    });
    var ac = 0;
    var n = s.floor(s.random() * 3) + 1;
    var b = [B];
    for (var g = 1; g < 4; g++) {
      ac = g == n ? B : o(b);
      b.push(ac);
      $("#o" + g).t(ac.replace(/_/g, " ")).a({
        d: ac
      })
    }
  }
}(window));

body { margin:0; background:#000; color:#fff; font-size:100%; }
div, table { position:fixed }
#c { width:100%; height:100%; }
#f { left:50%; top:20%; padding:10px 20px; width:100% }
table { top:0; right:0; padding:.5em; text-shadow:#000 2px 2px }
th { text-align:left }
tr { margin:.2em; }
#d { margin:10% auto; width:450px }
#o { width:100%; height:100%; background:rgba(0, 0, 0, .9); text-align:center; font-size:1.5em; }
#x { display:none; left:50%; top:50%; width:20em; margin:-50px 0 0 -10em }
input { display:block; margin:1em auto; font-size:20px }
h1 { font-size:55px; font-weight:normal; margin:0 }
#o h1 { font-size:80px }
li { cursor:pointer; font-size:25px; line-height:40px }
li.s { color:#ea5a2e; }
li.s:after { content:' <-'; }
#n { font-size:30px; top:15px; width:100%; text-align:center; text-shadow:#000 2px 2px 2px; }
svg { vertical-align:middle; position:absolute; }
.wf-inactive #f h1 { font-size:33px }
h1 { font-family:"learning-curve-1", "learning-curve-2", "Georgia", serif; }
body { font-family: "luxi-sans-1", "luxi-sans-2", sans-serif; }