4 ms·
Love the article and these kind of experiments! The only thing I don't like about this, is that CSS has traditionally been used to style the html components, so
by franciscop 4y ago
Love the article and these kind of experiments! The only thing I don't like about this, is that CSS has traditionally been used to style the html components, so when doing this:
rect {
x: 8;
y: 8;
width: 1;
height: 1;
fill: yellow;
style transform-box: fill-box;
transform-origin: center;
transform: rotate(45)
}
For me it's confusing since I read it as "all the rects have that x and y" while in this experiment it's actually defining a single instance of a rect. I'd rather prefer the styled components way (in fact I've done few experiments around it) like this:
const Diamond = styled.rect`
width: 1;
height: 1;
fill: yellow;
style transform-box: fill-box;
transform-origin: center;
transform: rotate(45)
`;
<svg>
<Diamond x={8} y={8} />
</svg>