On 2018-06-18 17:48:26, Ilia Mirkin wrote: > On Mon, Jun 18, 2018 at 7:19 PM, Jason Ekstrand <ja...@jlekstrand.net> wrote: > > On Mon, Jun 18, 2018 at 3:57 PM, Ilia Mirkin <imir...@alum.mit.edu> wrote: > >> > >> Not sure how much voting power I have, but I really like Erik's version at > >> > >> https://codepen.io/kusma/pen/vrXppL > >> > >> It uses CSS3 animation on hover, so it's pretty low impact. Some > >> slight cleverness could even include a fallback for a browser that > >> doesn't support SVG. > > > > > > Could you be more specific about what exactly it is that you like? Do you > > like the font? colors? style? the fact that it uses css? the fact that it > > doesn't use JS? To me, the later two are immaterial and pretty trivial to > > put into any logo design. Using WebGL is a bit less trivial, obviously. > > For reference, I'm comparing these two versions: > > Erik's: https://codepen.io/kusma/pen/vrXppL > Jason's: https://codepen.io/anon/pen/gKXobw > > I like both the aesthetic and the tech in Erik's variant. In general I > prefer serif fonts for readability, but I think in this case, a > sans-serif font lends itself better to lining up with the holes (I > believe others have commented on this). Placing the biggest gear below > the M (as in Erik's variant) gives it better weighting than above the > M (as in Jason's), since the M is also taller than the other letters, > that red gear is further above the "esa" in that version. Also the top > right serif from the M covers an awkward portion of the blue gear in > Jason's version. I do like the fact that Jason's version has a heavier > font, so if it's an option, Erik, I'd suggest trying to increase the > font weight on yours to see what happens. > > Regarding the tech, svg animations appear to be on their way out: > https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/ > (apparently it's not supported in IE or Edge[1]). So CSS3 animations > seem like the accepted thing to use all over.
Does Erik or Jason's version use CSS3? Thus they should work 'all over' include Edge/IE11? I tried them on Edge/IE11: > Erik's: https://codepen.io/kusma/pen/vrXppL The 'Mesa' text overflowed the box. (Should be easy to fix.) The gears did not turn. > Jason's: https://codepen.io/anon/pen/gKXobw It appeared to render correctly on Windows and Linux. The gears did not turn. -- I also fixed the Edge/IE11 issue with: https://people.freedesktop.org/~jljusten/webgl-logo/gears.html Now the webgl works and looks the same on Linux (Firefox, Chrome, WebKit), and Windows (Chrome, Edge, IE11). -Jordan > Now triggering with js > vs a hover style -- not hugely important, but IME the > mouseover/mouseout stuff is pretty unreliable. Maybe it actually works > now, who knows, but I've never had issues with :hover. Note that it's > also easy with CSS3 to do something like animate for 5s on load and > then stop (until the mouseover). (Yeah, you can do this with JS as > well...(most) ) > > Having some easter egg, as Rob Clark suggests, which flips it to a > full webgl thing would be cool, but seems like a separate endeavor. > > [1] The annoying thing one has to deal with in web development ... > browser support. Animation is an "extra" feature, but why not just > make it work? IE11 has no trouble with (most?) CSS3 animation > features. > _______________________________________________ > mesa-dev mailing list > mesa-dev@lists.freedesktop.org > https://lists.freedesktop.org/mailman/listinfo/mesa-dev _______________________________________________ mesa-dev mailing list mesa-dev@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/mesa-dev
