Closed unisgn closed 1 year ago
To reduce the number of frames in an animated SVG file, you can lower the dur
attribute in the animateTransform
tag. After doing this, you can generate bitmaps using the command yarn render
. There are a few things to consider before changing the dur
value:
For example, if you want to reduce the frames of the file left_ptr_watch.svg by half, you would need to divide each dur
value by 2. This is because they are part of the animation, and changing them too much can result in a broken animation or a completely different animation than intended.
<g transform="translate(-50 -50)">
<g transform="rotate(0 50 50)">
- <animateTransform attributeName="transform" type="rotate" repeatCount="4" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7575757575757576s"/>
+ <animateTransform attributeName="transform" type="rotate" repeatCount="4" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.3787878787878788s"/>
<path fill-opacity="0.8" fill="#f05125" d="M50 50L50 0A50 50 0 0 1 100 50Z"/>
</g>
<g transform="rotate(0 50 50)">
- <animateTransform attributeName="transform" type="rotate" repeatCount="3" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.0101010101010102s"/>
+ <animateTransform attributeName="transform" type="rotate" repeatCount="3" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.5050505050505051s"/>
<path fill-opacity="0.8" fill="#fdb813" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(90 50 50)"/>
</g>
<g transform="rotate(0 50 50)">
- <animateTransform attributeName="transform" type="rotate" repeatCount="2" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.5151515151515151s"/>
+ <animateTransform attributeName="transform" type="rotate" repeatCount="2" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7575757575757576s"/>
<path fill-opacity="0.8" fill="#7fbb42" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(180 50 50)"/>
</g>
<g transform="rotate(0 50 50)">
- <animateTransform attributeName="transform" type="rotate" repeatCount="1" values="0 50 50;360 50 50" keyTimes="0;1" dur="3.0303030303030303s"/>
+ <animateTransform attributeName="transform" type="rotate" repeatCount="1" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.515151515151515s"/>
<path fill-opacity="0.8" fill="#32a0da" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(270 50 50)"/>
</g>
</g>
After reducing the number of frames in the SVG file, you should also adjust the delay between the frames. You can do this by defining it in the build.toml file.
[cursors.fallback_settings]
x_hotspot = 100
y_hotspot = 100
-x11_delay = 13
+x11_delay = 7
-win_delay = 0
+win_delay = 1
Use the values of 7 and 1 as examples. Experiment to determine the appropriate values. You can test your cursor here without changing stages.
I was looking in the exact same thing.
If the size of these icons could become 1/3 less or half and still have a great look...
Might be something to look into and change to as a default
bibata cursor is the default cursor on https://arcolinux.info so let me also express my thanks for making this cursor
the animated left_ptr_watch and wait is really HUGE. Is there a way to reduce animation frames? perhaps in build.toml? thx.