spriter | CSS sprite sheet generator

Those artifacts appear to be from a lack of smoothing, which is great for pixel art, but not so great for vector art and things that rotate.

To enable smoothing, simply find the sf::Texture(s) for each body part, and call setSmooth(true) on each one.

Official documentation here

The difference lies in how each on-screen pixel (or fragment) of the the texture will be rendered when the texture coordinates it maps onto fall inbetween texture pixels (or texels). Such misalignment occurs easily when you perform scaling, fractional translation, and rotation.

With smoothing turned on, each fragment is rendered by interpolating several texels that are nearest to its calculated texture coordinates. If a fragment's texture coordinates fall between texels, then you'll see a tiny amount of blending happening.

Otherwise, with smoothing disabled, each fragment is rendered simply by choosing the single texel closest to its calculated texture coordinates, and performs no interpolation. In this case, when a fragment's texture coordinates fall between texels, simply one or the other texel is chosen. This results in the jagged, blocky rotation artifacts you are seeing.

Note that for things like densely-packed spritesheets, smoothing can have the effect of neighbouring texture data "bleeding" into the current sprite.