Tips n' tricks
April 6, 2019 at 9:36amTips n' tricks
April 6, 2019 at 9:36am (Edited 8 months ago)I think it'd be nice to share some specific tricks we've stumbled into while grinding through these, here are some I found helpful:
position:fixed
almost always beatsposition:absolute;
- never use
rotate(180deg)
in transforms, usescaleY(-1)
- don't quote attributes, just use
+
instead of a space, eg:<img style=box-shadow:0+0+0+2px#FFF>
vs<img style="box-shadow:0 0 0 2px#FFF">
- if you use a
border-radius
of over 99% considerin
as a unit instead (eg,9in
) - in a pinch, you can add made-up attributes and select them.
<p i>
is selectable via[i]: {}
April 6, 2019 at 8:30pm
2 shapes formed once you play with border, margin and border-radius. 1 for the
html
and 1 for the body
. Using the box-shadow trick, the outer one can be hidden.Hmm interesting, gonna see if I can recreate that. I actually did something similar to Alex, but with some more optimization I just got it to 123 characters 🤐
I think I'm gonna waste my sleep today figuring out this optimization
hi ! If you have any general high-level tips for svg golfing I'd be interested in hearing them, you're consistently like 50+ bytes ahead of me, feels like I'm missing some basic tricks
#2 is probably the one I'm furthest from understanding, I've just been ignoring it :D
Well, there are many tricks. First of all, SVG has default size for replaced element 150×150. However, you can set size via
width
and height
attributes, or set an aspect-ratio with viewBox
, then it will have 100% width and corresponding height.
viewBox
can be also used for scaling SVG units (by default they equal to pixels)–it can cut a number of bytes. One fine usage of it is to normalize scale in such a manner, that stroke-width
you want to use had size equal to one, so it can omitted as a default value.welp there goes my whole day
Btw,
SVGO
is handy for scaling images, e.g. one can add transform
and ran it in a manner$ svgo -s '<path d="M50,50h50v50h-50" transform="scale(.02)">`
and you get values like
d=M1,1h1v1H1
.Some minor tricks: paths are get closed automatically, so you can omit the last segment or
z
, if you don't need them (can have use for strokes).
There is arcto
command in <path/>
, that helps building circular segments. One trick, that I learnt recently myself is that space after flags can be omitted. E.g. a50,50,0,0110,0
.Well, they are closely related. Also, personally I think that drawing with CSS generally is not that good idea for most not-trivial cases. SVG fits better, and results proof it.
I agree with you completely of course – SVG is perfect for drawing shapes. But that's my whole point. It's hard to do these levels with just CSS which is what made it fun. My understanding is that this is what the game was about, so I was surprised when I saw that SVG solutions were allowed. Still - major respect for your skills :)
One more tip about SVG. Browsers recently allowed using
href
attrubute without xlink:
prefix and—more importantly—corresponding namespace. It's handy for referencing elements with <use/>
tag. E.g.:<rect width="100" height="50" id="r" /><use href="#r" x="50" y="100" fill="green" />
(just remember that attributes within refererenced elements cannot be overwritten. It's kinda like predecessor of shadow DOM.)
🎉120!
Still without using
border:
? 🤔