Smooth hand graphics in Fitbit Light clock face

[uoziod]

I found out that hands on Fitbit Light are rendered smooth on the watch:

I tried to imitate similar hands by the rectangle and 2 circles on the ends, and it renders fine in Emulator, although on the device they look like this:

 

I wonder how they're done in Fitbit's clock face?

[MrFry · Accepted solution]

Because Fitbit only supports a subset of the SVG featureset that doesn't include rounded rectangles or linecaps I am fairly certain these are just rotated images.

[uoziod]

Have just tried this and actually result look worse than the SVG-way. PNG is rendered with rough edges when hands are at certain angles. Cannot make a photo to make it visible. So, still looking for the solution

[MrFry]

Are you doing the "grayscale magic" as outlined in the css guide? 

[uoziod]

Not sure. Could you pinpoint?

It just rendered without any "smoothing", pixelated, you know? Looks even uglier than uneven SVG circles.

[uoziod]

I just tried to use bitmaps of actuals sizes and those look pretty decent. Agree with your suggestion 🙂

[sagarsiddhpura]

I am also facing same problem

[EmTe]

Either do this in your index.gui file:

<line stroke-linecap="round" />

Or put this line in your styles.css file:

line {stroke-linecap: round}