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.

Wow!

@dorus

How did you arrive at 123 chars? SVG?

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 🤐

Just managed to recreate your method

@apnerve

, now I'm at 122 🤯

Touchè

I think I'm gonna waste my sleep today figuring out this optimization

Sure thing! I guess, creators underestimate the power of SVG! Had to do some pixel-hunting before 99.9% issue were fixed. Still, some levels solutions are mistery for me like 4 chars saved in #8, or high scores in #2 and #3 or #9.

Getting third place on #9 was not easy, but I'm perplexed at the two scores above me that are 20 chars less.

hi

@lev-solntsev

! 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

Can you point me in the right direction without giving it away?

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.

Wow that makes so much sense

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.

Just tied you for 124 chars on Target 7 but I'm not using border: 🤔

I even managed to get to 121 using your method! 🎉 So there are still 3 small optimizations you're missing. Small hint: I've only used the character x twice in my solution.

I totally respect the SVG magic going on - really impressive – but that's a whole other thing as far as I'm concerned. I can't possibly get close. I thought it was supposed to be a CSS thing? Is there any way to have a mode of play where SVG is not allowed? I'm a lot more interested in that.

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.

🎉120!

@jon-uleis

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

If only there was some way to color the corners of border...(hope that gets you started)

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

@jon-uleis

Still without using border:? 🤔