Please svgify The Snowflake [closed]

Question

This question was closed because it could no longer be reproduced. It is not currently accepting answers.

The problem described here can no longer be reproduced. Changes to the system or to the circumstances affecting the asker have rendered it obsolete. If you encounter a similar problem, please post a new question.

Closed last month.

Improve this question

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 :)

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

Community · Accepted Answer · 2017-03-20 10:31:00Z

Update - Is this status-completed?!? 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, Commented Dec 29, 2014 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, Commented Dec 30, 2014 at 16:21
Oh, I completely forgot that Winterbash ends today. Do you still work on it or not? — nicael -misses Sha-, Commented Jan 5, 2015 at 7:36
@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, Commented Jan 5, 2015 at 13:21
Yay! Maybe the winterbash dropdown will work too? Pleeeeeeez!!! — nicael -misses Sha-, Commented Jan 5, 2015 at 13:32
And it doesn't seem to change much, maybe you make so as each sector becomes as the whole snowflake? — nicael -misses Sha-, Commented Jan 6, 2015 at 14:14

Tim Stone · Accepted Answer · 2014-12-16 08:11:32Z

58

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!

answered Dec 16, 2014 at 8:11

Tim Stone

58.4k9 gold badges161 silver badges249 bronze badges

18

Oh god, now I've started looking, everything is wrong with this icon, argh!!
– fredley
Commented Dec 16, 2014 at 9:24
9

IT CAN'T BE UNSEEN
– Tim Stone
Commented Dec 16, 2014 at 9:25
2

Rollback to revision 2012.04.23.1267 and start over from there....
– rene Mod
Commented Dec 16, 2014 at 11:53
4

I believe this answer is better off on its own question.
– unbindall
Commented Dec 29, 2014 at 16:08

Add a comment |

Stack Exchange Network

Please svgify The Snowflake [closed]

2 Answers 2

Update - Is this status-completed?!? Yay!!

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

Holiday Bonus Time:

Update with zooming

Linked

Hot Network Questions

Please svgify The Snowflake [closed]

2 Answers 2

Update - Is this status-completed?!? Yay!!

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

Holiday Bonus Time:

Update with zooming

Linked

Related

Hot Network Questions