andre-kotze/hawt_cursor

Customised Bibata Original Cursor set with wind turbine loaders.

Installing Bibata Cursor

Linux/X11

Installation:

tar -xvf Bibata.tar.gz                # extract `Bibata.tar.gz`
mv Bibata-* ~/.icons/                 # Install to local users
sudo mv Bibata-* /usr/share/icons/    # Install to all users

Uninstallation:

rm ~/.icons/Bibata-*                  # Remove from local users
sudo rm /usr/share/icons/Bibata-*     # Remove from all users

Build From Source

Notes

• Bibata build configuration and cursor hotspot settings are bundled in the build.toml file.
• Check out the scripts section in package.json to see how we build the cursor theme, excluding the render scripts. They are useful for converting .svg files to .png files.
• yarn is optional, For building XCursors and Windows cursors from .png files or resizing them you don't need that. If you want to develop/modify Bibata's colors, and bitmaps, or generate a png file from a svg, Then you can use yarn because bitmapper is written in TypeScript.
• Since Bibata Modern and Bibata Original are designed similarly, they share the same hotspot settings so a single configuration file build.toml is responsible for building all variants. Due to this, you will have to change the following options in ctgen to build the appropriate variant:
  • -d: bitmaps directory
  • -n: The name you want to give to the generated theme.
  • -c: Theme comment.
  • See ctgen --help for all available options.

Build prerequisites

• Python version 3.7 or higher
• clickgen>=2.1.2 (pip install clickgen)
• attrs>=22.2.0 (pip install attrs)
• yarn

Quick start

1. Install build prerequisites on your system
2. git clone https://github.com/ful1e5/Bibata_Cursor
3. cd Bibata_Cursor && yarn build
4. See Installing Bibata Cursor.

Building

Note Bitmaps are already generated in the bitmaps directory and managed by the maintainer (do not edit them directly).

First make sure you installed the build prerequisites. Now that you have the dependencies, you can try build individual themes from bitmaps and customize sizes, target platform, and etc. with the ctgen CLI (packed with clickgen).

yarn build aberration

Here are the default commands we used to build the Bibata's variants and packed them into yarn build:

ctgen build.toml -d 'bitmaps/Bibata-Modern-Amber' -n 'Bibata-Modern-Amber' -c 'Yellowish and rounded edge bibata cursors.'
ctgen build.toml -d 'bitmaps/Bibata-Modern-Classic' -n 'Bibata-Modern-Classic' -c 'Black and rounded edge Bibata cursors.'
ctgen build.toml -d 'bitmaps/Bibata-Modern-Ice' -n 'Bibata-Modern-Ice' -c 'White and rounded edge Bibata cursors.'

ctgen build.toml -d 'bitmaps/Bibata-Original-Amber' -n 'Bibata-Original-Amber' -c 'Yellowish and sharp edge Bibata cursors.'
ctgen build.toml -d 'bitmaps/Bibata-Original-Classic' -n 'Bibata-Original-Classic' -c 'Black and sharp edge Bibata cursors.'
ctgen build.toml -d 'bitmaps/Bibata-Original-Ice' -n 'Bibata-Original-Ice' -c 'White and sharp edge Bibata cursors.'

Afterwards, the themes can be found in the themes directory.

Customize Sizes

Note You can change the cursor size up to 200 because pngs are rendered with 200x200. If the cursor is resized by more than rendered png size, the final cursor will be blurred.

Customize XCursor size

To build XCursor with size 16:

ctgen build.toml -s 16 -p x11 -d 'bitmaps/Bibata-Modern-Ice' -n 'Bibata-Modern-Ice' -c 'White and rounded egde Bibata cursors with size 16'

You can also assign multiple sizes to ctgen for XCursors build:

ctgen build.toml -s 16 24 32 -p x11 -d 'bitmaps/Bibata-Modern-Ice' -n 'Bibata-Modern-Ice' -c 'Custom white and rounded egde Bibata cursors'

Customize Colors

To customize bibata's color you have to install node dependencies with yarn install command. After installing dependencies you can customize the colors via npx cbmp Node CLI App which packed with cbmp node package.

yarn render aberration

Here are the default commands we used for generating the Bibata's bitmaps and packed them into yarn render:

npx cbmp -d 'svg/modern' -n 'Bibata-Modern-Amber' -bc '#FF8300' -oc '#FFFFFF' -wc '#001524'
npx cbmp -d 'svg/modern' -n 'Bibata-Modern-Classic' -bc '#000000' -oc '#FFFFFF'
npx cbmp -d 'svg/modern' -n 'Bibata-Modern-Ice' -bc '#FFFFFF' -oc '#000000'
npx cbmp -d 'svg/original' -n 'Bibata-Original-Amber' -bc '#FF8300' -oc '#FFFFFF' -wc '#001524'
npx cbmp -d 'svg/original' -n 'Bibata-Original-Classic' -bc '#000000' -oc '#FFFFFF'
npx cbmp -d 'svg/original' -n 'Bibata-Original-Ice' -bc '#FFFFFF' -oc '#000000'

Examples

Lets generate modern Bibata with green base color and black outline:

npx cbmp -d 'svg/modern' -n 'Bibata-Hacker' -bc '#00FE00' -oc '#000000' -wc '#001524'

After rendering custom color you have to build cursor through ctgen:

ctgen build.toml -d 'bitmaps/Bibata-Hacker' -n 'Bibata-Hacker' -c 'Green and black Bibata cursors.'

Afterwards, Generated theme can be found in the themes directory.

Bibata Gruvbox

npx cbmp -d 'svg/original' -n 'Bibata-Gruvbox' -bc '#282828' -oc '#EBDBB2' -wc '#000000'
ctgen build.toml -d 'bitmaps/Bibata-Gruvbox' -n 'Bibata-Gruvbox' -c 'Groovy Bibata cursors.'

Bibata Solarized Dark

npx cbmp -d 'svg/original' -n 'Bibata-Solarized-Dark' -bc '#002b36' -oc '#839496' -wc '#000000'
ctgen build.toml -d 'bitmaps/Bibata-Solarized-Dark' -n 'Bibata-Solarized-Dark' -c 'Solarized Dark Bibata cursors.'

Bibata Solarized Light

npx cbmp -d 'svg/original' -n 'Bibata-Solarized-Light' -bc '#839496' -oc '#002b36'
ctgen build.toml -d 'bitmaps/Bibata-Solarized-Light' -n 'Bibata-Solarized-Light' -c 'Solarized Light Bibata cursors.'

Bibata Dracula

npx cbmp -d 'svg/original' -n 'Bibata-Dracula' -bc '#282a36' -oc '#f8f8f2'
ctgen build.toml -d 'bitmaps/Bibata-Dracula' -n 'Bibata-Dracula' -c 'Dracula Bibata cursors.'

Testing Cursor

There are several websites that allow you to test your cursor states by hovering over buttons. This can be very useful when developing or verifying the behavior of a cursor. The following websites cover many of the most commonly used cursors, although they may not include all available options.

• Cursor-Test
• Mozilla CSS Cursor

For a blueprint for creating XCursors, you may also want to refer to Cursor-demo.

Credit

Bibata Cursor