window.onload = function () {
        var canvas = document.getElementById("canvas");
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d"),
      images = { logo: "Portals/0/Skins/ZanMgt/Images/logo.png", circle: "Portals/0/Skins/ZanMgt/Images/circle.png" },
      angles = [35, 43.5, 36.5, 36, 30, 40],
      rayCurrent = [180, 270, 55, 155, 25, 0],
      raySpeed = [20.5, 10.25, 20.5, 10.25, 20.5, 10.25],
      i, scale, rotate = 0,
      frames = 30, rotSpeed = 0.3,
      yOffset = -48, clipOffset = 352;
        for (i in images) {
            var image = new Image();
            image.src = images[i];
            images[i] = image;
        }
        var rotate = 0, scale,
      blackSpike = ctx.createLinearGradient(0, 0, 1, 0),
      whiteSpike = ctx.createLinearGradient(0, 0, 1, 0);
        blackSpike.addColorStop(0, "black");
        blackSpike.addColorStop(1, "transparent");
        whiteSpike.addColorStop(0, "white");
        whiteSpike.addColorStop(1, "transparent");
        ctx.shadowBlur = 2;
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
        setInterval(function () {
            rotate = (rotate + rotSpeed) % 360;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (images.circle.complete) {
                ctx.save();
                ctx.translate(canvas.width / 2, canvas.height / 2 + yOffset);
                ctx.rotate(rotate * Math.PI / 180);
                ctx.translate(-images.circle.width / 2, -images.circle.height / 2);
                ctx.drawImage(images.circle, 0, 0);
                ctx.restore();

                ctx.save();
                ctx.fillStyle = blackSpike;
                ctx.beginPath();
                ctx.rect(0, 0, canvas.width, clipOffset);
                ctx.clip();
                ctx.translate(canvas.width / 2, canvas.height / 2 + yOffset);
                ctx.rotate(rotate * Math.PI / 180);
                for (i = 0; i < 6; i++) {
                    rayCurrent[i] += 360 / (raySpeed[i] * frames);
                    if (rayCurrent[i] > 360) rayCurrent[i] -= 360;
                    ctx.save();
                    ctx.rotate((i * 60 + angles[i]) * Math.PI / 180);
                    ctx.translate(images.circle.width / 2 - 18, 0);
                    scale = (1.5 + Math.sin(rayCurrent[i] / 180 * Math.PI)) * 55;
                    ctx.scale(scale, 0.4 + scale / 80);
                    ctx.translate(0, -0.5);
                    ctx.fillRect(0, 0, 100, 1);
                    ctx.restore();
                }
                ctx.restore();

                ctx.save();
                ctx.fillStyle = whiteSpike;
                ctx.beginPath();
                ctx.rect(0, clipOffset, canvas.width, canvas.height);
                ctx.clip();
                ctx.translate(canvas.width / 2, canvas.height / 2 + yOffset);
                ctx.rotate(rotate * Math.PI / 180);
                for (i = 0; i < 6; i++) {
                    ctx.save();
                    ctx.rotate((i * 60 + angles[i]) * Math.PI / 180);
                    ctx.translate(images.circle.width / 2 - 18, 0);
                    scale = (1.5 + Math.sin(rayCurrent[i] / 180 * Math.PI)) * 55;
                    ctx.scale(scale, 0.4 + scale / 80);
                    ctx.translate(0, -0.5);
                    ctx.fillRect(0, 0, 1, 1);
                    ctx.restore();
                }
                ctx.restore();
            }
            if (images.logo.complete) {
                ctx.save();
                ctx.translate(canvas.width / 2, canvas.height / 2 + yOffset);
                ctx.scale(0.93, 0.93);
                ctx.translate(-images.logo.width / 2, -images.logo.height / 2 + 7);
                ctx.drawImage(images.logo, 0, 0);
                ctx.restore();
            }
        }, 1 / frames);
    }