On Tue, Jun 19, 2018 at 11:00 PM, Jordan Justen <jordan.l.jus...@intel.com> wrote: > 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?
Erik's version is the CSS3 one. His earlier version used the <animate> element, but I suggested he implement with CSS3 which he adopted. Jason's uses the <animate> still, but would easily be convertable to the CSS3 way. > > 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. Wow, massive fail (I should have seen this coming... it's IE after all): https://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11 Looks like you can do it if you split it up into a bunch of separate SVG's. > >> Jason's: https://codepen.io/anon/pen/gKXobw > > It appeared to render correctly on Windows and Linux. > > The gears did not turn. I think that's the lack of SMIL issue. > 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). Double-checked on IE11 on Win7, can confirm it renders OK. -ilia _______________________________________________ mesa-dev mailing list mesa-dev@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/mesa-dev
