Around the time when mobile update happened (don't remember when it was exactly), inbox and achievements icons were svgifgied. Now plz svgify The Snowflake too :)

  • 16
    everything need to be perfect !!!!!!!!!!! whether it's temporary or permanent – Bala Dec 16 '14 at 6:38
  • @Sha eh, its not on iPhone, but on SGS5. Please use [full-hd-super-amoled] tag :D – nicael Dec 16 '14 at 8:14
  • 8
    It should be a fractal, so that the more you zoom in the more "unique" the snowflake appears. ;-) – William Price Dec 17 '14 at 5:42
  • 2
    @balpha thanks looking awesome! Being super picky, it's not 100% aligned: i.stack.imgur.com/HD5UE.png (would totally get "meh" as an answer ;)) – Shadow Wizard Dec 23 '14 at 7:25
up vote 26 down vote accepted
+1000

Update - Is this ?!? Yay!!

Here's the current zoomed in screen:

current

And here's the current css:

#wb-newprofile-snowflake, .topbar .topbar-icon.icon-winterbash {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20216%20216%22%20version%3D%221.1%22%20y%3D%220px%22%20x%3D%220px%22%20enable-background%3D%22new%200%200%20216%20216%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22m148.6%20112.8l-6.7-3.9-10.5%206.2-15.2-8.7%2015.2-8.8%2010.7%206.5%206.7-3.9-10.7-6.5%209.9-5.7-3.5-6-9.9%205.7-0.1-12.2-6.7%203.9%200.1%2012.2-15.2%208.7v-17.4l11-6v-7.7l-11%206v-11.5h-6.7v11.5l-10.6-6v7.7l10.6%206v17.5l-15.2-8.8%200.3-12.5-6.7-3.9-0.3%2012.5-9.9-5.7-3.5%206%209.9%205.7-10.5%206.2%206.7%203.9%2010.5-6.2%2015.2%208.7-15.2%208.8-10.7-6.5-6.7%203.9%2010.7%206.5-9.9%205.7%203.5%206%209.9-5.7%200.1%2012.2%206.7-3.9-0.1-12.2%2015.2-8.7v17.6l-11%206v7.7l11-6v11.5h6.9v-11.5l10.6%206v-7.7l-10.6-6v-17.5l15.2%208.8-0.3%2012.5%206.7%203.9%200.3-12.5%209.9%205.7%203.5-6-9.9-5.7%2010.3-6.4zm-39.2-6.4l-0.1%200.1v-0.1-0.1l0.1%200.1z%22%2F%3E%3C%2Fsvg%3E')!important;
}

Ok, so here's the old sad snowflake, and here's an svg'd version:

<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
  <polygon stroke="null" fill="#888888" transform="rotate(28.66 7.09,6.98)" points="3.06,1.16 4.17,0.46 5.03,1.90 5.67,0.46 6.70,1.18 5.76,3.16 7.09,5.51 8.46,2.98 7.43,1.11 8.46,0.46 9.11,1.90 9.97,0.46 11.08,1.16 10.31,2.51 11.77,2.46 11.77,3.68 9.71,3.72 8.21,6.16 10.95,6.16 12.24,4.33 13.10,5.03 12.28,6.16 13.87,6.16 13.87,7.51 12.37,7.51 13.10,8.68 12.28,9.42 10.91,7.51 8.25,7.51 9.62,9.94 11.77,10.20 11.81,11.25 10.35,11.25 11.04,12.51 9.97,13.25 9.11,11.90 8.46,13.25 7.48,12.68 8.46,10.64 7.13,8.20 5.72,10.60 6.66,12.64 5.67,13.25 4.99,11.81 4.26,13.25 3.06,12.51 3.87,11.16 2.20,11.20 2.20,10.16 4.52,9.99 5.89,7.51 3.27,7.46 1.94,9.42 1.00,8.77 1.86,7.51 0.18,7.51 0.18,6.20 1.94,6.29 1.04,4.85 1.94,4.24 3.19,6.20 5.98,6.25 4.60,3.81 2.20,3.64 2.41,2.51 3.83,2.64 "/>
</svg>

Update - here's an SVG implementation I just wrote that's much cleaner:

<svg width="200" height="200" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <def>
        <g fill="#888888" id="branch">
            <rect x="47" y="5"  width="6" height="45" />
            <rect x="47" y="10" width="6" height="20" transform="translate(-7)rotate(-45, 50, 20)"/>
            <rect x="47" y="10" width="6" height="20" transform="translate( 7)rotate( 45, 50, 20)"/>
        </g>
    </def>
    <use xlink:href="#branch" transform="rotate(0,   50, 50)" />
    <use xlink:href="#branch" transform="rotate(60,  50, 50)" />
    <use xlink:href="#branch" transform="rotate(120, 50, 50)" />
    <use xlink:href="#branch" transform="rotate(180, 50, 50)" />
    <use xlink:href="#branch" transform="rotate(240, 50, 50)" />
    <use xlink:href="#branch" transform="rotate(300, 50, 50)" />
</svg>

To test it, I added it as a gist, and served it through rawgit. Then checked to make sure it would be happy taking over it's 14px by 14px predessor with the following css:

.topbar .topbar-icon.icon-winterbash {
  background-image: url(https://rawgit.com/KyleMit/cecfb57d641ad9be755e/raw/a5fac80617d784e37b1c459c42000545b2002741/Snowflake.svg)!important;
}

Which looks like this in-page:

are you happy now! :)


Holiday Bonus Time:

Here's the sprite with the graph bar:

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="230.9" y="71.7" fill="#888888" width="2"   height="4.1"/>
    <rect x="233.7" y="70.8" fill="#888888" width="2.2" height="5.1"/>
    <rect x="236.7" y="69.2" fill="#888888" width="2.2" height="6.7"/>
    <rect x="239.8" y="70.5" fill="#888888" width="2.2" height="5.4"/>
    <rect x="242.9" y="68.2" fill="#888888" width="2.2" height="7.7"/>
    <polygon fill="#888888" points="232.8,68.9 233.7,68.9 233.7,69.2 235.8,69.2 235.8,68.1 236.9,67 238.9,67 238.9,66.8 239.8,66.8    239.8,67.9 241.9,67.9 241.9,66.9 243,66.3 243,66.4 245.1,66.4 245.1,64.2 243,64.2 243,65.6 241.9,66.2 241.9,65.7 239.8,65.7    239.8,66.2 238.9,66.2 238.9,64.8 236.8,64.8 236.8,66.3 235.8,67.2 235.8,67 233.7,67 233.7,68.3 232.8,68.3 232.8,67.6    230.9,67.6 230.9,69.6 232.8,69.6  "/>
  </g>
</svg>

The y and height attribute combined determine the bottom's height.
Each rect element above adds up to 75.9, except the first one only gets to 75.8

So here's a slightly improved version:

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="230.9" y="71.7" fill="#888888" width="2"   height="4.2"/>
    <rect x="233.7" y="70.8" fill="#888888" width="2.2" height="5.1"/>
    <rect x="236.7" y="69.2" fill="#888888" width="2.2" height="6.7"/>
    <rect x="239.8" y="70.5" fill="#888888" width="2.2" height="5.4"/>
    <rect x="242.9" y="68.2" fill="#888888" width="2.2" height="7.7"/>
    <polygon fill="#888888" points="232.8,68.9 233.7,68.9 233.7,69.2 235.8,69.2 235.8,68.1 236.9,67 238.9,67 238.9,66.8 239.8,66.8    239.8,67.9 241.9,67.9 241.9,66.9 243,66.3 243,66.4 245.1,66.4 245.1,64.2 243,64.2 243,65.6 241.9,66.2 241.9,65.7 239.8,65.7    239.8,66.2 238.9,66.2 238.9,64.8 236.8,64.8 236.8,66.3 235.8,67.2 235.8,67 233.7,67 233.7,68.3 232.8,68.3 232.8,67.6    230.9,67.6 230.9,69.6 232.8,69.6  "/>
  </g>
</svg>

Although there might be other things to clean up

Note: Stack Exchange operates under a cc by-sa 3.0 anyway, but they, and anyone else, have my full permission to use this code for any and all purposes.

Update with zooming

Ok, here's a really rough draft on having some interactions and depth. It's only one layer and doesn't quite overlap great, but it's a foundation that could hopefully be expanded upon.
Note: Zoom on the perimeter

// create canvas
var s = Snap(300, 300);

// set defaults
var rectWidth = 6;
var halfRectWidth = rectWidth / 2;
var middleX = 50;
var middleY = 50;
var twigHeight = 20;
var numberOfBranches = 6;
var degreeSegment = 360 / numberOfBranches;

// create trunk
var trunk = s.rect(middleX - halfRectWidth, 5, rectWidth, 45)
             .addClass("trunk");

// create twigs
for (i = 0; i < 2; i++) {
  var direction = (i == 0) ? -1 : 1;
  var twig = s.rect(middleX - halfRectWidth, 10, rectWidth, twigHeight)
        .addClass("twig")
        .transform(
          new Snap.Matrix()
              .translate(direction*(rectWidth + 1), 0)
              .rotate(direction*45, middleX, 20)
        );
}

// create branch
var base = Snap.selectAll(".trunk, .twig")
var branch = s.group(base)
              .addClass("branch");

// build snowflake
for (i = 0; i < numberOfBranches; i++) {
  var branchClone = branch.clone()
      .transform(
        new Snap.Matrix()
            .rotate(i * degreeSegment, middleX, middleY));
}

// create snowflake
var branches = Snap.selectAll(".branch")
var snowflake = s.group(branches)
                 .attr({
                   class: "snowflake",
                   fill: "#888888"
                 });

// build outside snowflakes
for (i = 0; i < numberOfBranches; i++) {
  var branchClone = snowflake.clone()
      .attr({
        class: "snow-1",
        fill: "black"
      })
      .transform(
        new Snap.Matrix()
           .rotate(i * degreeSegment, middleX, middleY)
           .translate(0, -35)
           .scale(.3, .3, middleX, middleY)
      );
}
// build center snowflake
var clone = snowflake.clone()
  .attr({
    class: "snow-1",
    fill: "black"
  })
  .transform(
    new Snap.Matrix()
      .scale(.3, .3, middleX, middleY)
  );

// capture new snowflakes
var $snow1 = Snap.selectAll(".snow-1")

// set visibility based on zoom
function setVisibility(zoomLevel) {
  $snow1.attr({
    opacity: (zoomLevel - 1) * 7 / 100
  });
}

// set initial visibility
setVisibility(1);

// set zoom with options
s.zpd({
  zoomScale: 2,
  zoomed: setVisibility
});
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="http://kylemit.github.io/snap.svg.zpd/snap.svg.zpd.js"></script>

  • @nicael, haha..thanks! My only regret is not implementing William's suggestion of infinitely expanding fractals as you zoom in. – KyleMit Dec 29 '14 at 16:12
  • @nicael, haha... I looked into this last night. There would be very low odds of it getting implemented as it would need javascript to monitor the zoom of the page or of the element and dynamically add elements. It still would be a fun little code golf so I'll post an update here if I come up with a semantic zoom solution. Thanks for the bounty btw! :) – KyleMit Dec 30 '14 at 16:21
  • Oh, I completely forgot that Winterbash ends today. Do you still work on it or not? – nicael Jan 5 '15 at 7:36
  • 1
    @nicael, still working. I converted the snowflake to javascript using snap.js and then got it to programmatically zoom so I could attach handlers to the zoom event. Gimme 24 more hours to post some progress. – KyleMit Jan 5 '15 at 13:21
  • Yay! Maybe the winterbash dropdown will work too? Pleeeeeeez!!! – nicael Jan 5 '15 at 13:32
  • I would recommend you to use the bigger canvas... – nicael Jan 6 '15 at 14:02
  • Also, works only in jsfiddle, not as snippet. – nicael Jan 6 '15 at 14:09
  • And it doesn't seem to change much, maybe you make so as each sector becomes as the whole snowflake? – nicael Jan 6 '15 at 14:14

Woah, woah, woah. The snowflake can wait, we have a far more serious problem here:

notification icon magnified to show design error

Just look at that first bar, it doesn't start at the same position as all the others at all. I always knew something was off about that icon, but I didn't fully notice until I saw the enlarged version here. ALL OUR REPUTATION NOTIFICATIONS HAVE BEEN PIXEL-UNPERFECT LIES!

  • 17
    Oh god, now I've started looking, everything is wrong with this icon, argh!! – fredley Dec 16 '14 at 9:24
  • 9
    IT CAN'T BE UNSEEN – Tim Stone Dec 16 '14 at 9:25
  • 2
    Rollback to revision 2012.04.23.1267 and start over from there.... – rene Dec 16 '14 at 11:53
  • 4
    I believe this answer is better off on its own question. – boxspah Dec 29 '14 at 16:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .