Giter VIP home page Giter VIP logo

bibata_cursor's Introduction

shoutout-sponsors

Bibata Cursor

build

TLDR; This cursor set is a masterpiece of cursors available on the internet, hand-designed by Abdulkaiz Khatri.

Bibata is an open source, compact, and material designed cursor set that aims to improve the cursor experience for users. It is one of the most popular cursor sets in the Linux community and is now available for free on Windows as well, with multiple color and size options. Its goal is to offer personalized cursors to users.

What does "Bibata" mean?

The sweetest word I ever spoke was "BI-Buh," which, coincidentally, is also the word for peanuts. To make it more pronounceable and not sound like a baby's words, I added the suffix "Ta." And with that, my journey in the world of open source began.

Join the Community as a Sponsor

Until 2021, my cursor projects were funded through pling.com. However, the funding has since decreased and the projects are now dependent on community support and sponsorships to continue. If you would like to help me maintain Bibata and my other open source projects, you can consider sponsoring my work on GitHub Sponsor or contacting me on Twitter if your company is interested in supporting my projects. I would be happy to discuss it and include your avatar in the project's README.

I am grateful to all the kind individuals and companies that support and sponsor my work, which enables me to continue working on open source projects full-time. Thank you.


Bibata Amber Bibata Classic Bibata Ice

Note All cursor's .svg files are found in svg directory or you can also find them on Figma.

Variants:

  • Bibata Original Amber: Yellowish and sharp edge bibata cursors.
  • Bibata Modern Amber: Yellowish and rounded edge bibata cursors.
  • Bibata Original Classic: Black and sharp edge bibata cursors.
  • Bibata Modern Classic: Black and rounded edge bibata cursors.
  • Bibata Original Ice: White and sharp edge bibata cursors.
  • Bibata Modern Ice: White and rounded edge bibata cursors

Cursor Sizes

Xcursor Sizes:

22 24 28 32 40 48 56 64 72 80 88 96

Windows Cursor Size:

  • 16x16 - Small
  • 24x24 - Regular
  • 32x32 - Large
  • 48x48 - Extra Large

Colors:

Bibata Amber

  • Base Color - #FF8300 (Amber)
  • Outline Color - #FFFFFF (White)
  • Watch Background Color - #001524 (Rich Black)

Bibata Classic

  • Base Color - #000000 (Black)
  • Outline Color - #FFFFFF (White)
  • Watch Background Color - #000000 (Black)

Bibata Ice

  • Base Color - #FFFFFF (White)
  • Outline Color - #000000 (Black)
  • Watch Background Color - #FFFFFF (White)

How to get it

Easiest Way

You can download latest stable & development releases from Release Page.

Packages

Note If you're having trouble with the packages please submit a request to the package maintainer before creating an issue.

Arch Linux/Manjaro

Arch Linux/Manjaro users can install from the AUR currently maintained by @Shatur & @yochananmarqos. Can be installed via Pamac (preinstalled in Manjaro), Paru or any other AUR helper.

paru -S bibata-cursor-theme

Alternatively, Bibata binaries can be also installed using the PKGBUILD bibata-theme-bin, available on the AUR.

Fedora

copr-repo by @peterwu (recommended)
sudo dnf copr enable peterwu/rendezvous
sudo dnf install bibata-cursor-themes
copr-repo by @muhalantabli
sudo dnf copr enable muhalantabli/copr-repo
sudo dnf install bibata-cursor-theme

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

Windows

Installation:

  1. Unzip .zip file
  2. Open unziped directory in Explorer, and right click on install.inf.
  3. Click 'Install' from the context menu, and authorize the modifications to your system.
  4. Open Control Panel > Personalization and Appearance > Change mouse pointers, and select Bibata Cursors.
  5. Click 'Apply'.

Uninstallation:

Run the uninstall.bat script packed with the .zip archive

OR follow these steps:

  1. Go to Registry Editor by typing the same in the start search box.
  2. Expand HKEY_CURRENT_USER folder and expand Control Panel folder.
  3. Go to Cursors folder and click on Schemes folder - all the available custom cursors that are installed will be listed here.
  4. Right Click on the name of cursor file you want to uninstall; for eg.: Bibata Cursors and click Delete.
  5. Click 'yes' when prompted.

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 Windows Cursor size

To build Windows cursor with size 16:

Warning Windows cursor supports only one size, if multiple sizes are given with -s the first size will be considered in build.

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

You can also customize output directory with -o option:

ctgen build.toml -s 16 -p windows -d 'bitmaps/Bibata-Modern-Ice' -o 'out' -n 'Bibata-Modern-Ice' -c 'White and rounded egde Bibata cursors with size 16'
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.'

You may also like...

Write markdown as i wrote and fix grammer and link sentence and make it informative with tilte according to sentences:

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.

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

Credit

Wedge Loading Animation · Adwaita · Dmz · Yaru

bibata_cursor's People

Contributors

ful1e5 avatar silicasandwhich avatar clefebvre avatar allanc56 avatar dependabot[bot] avatar davidlj95 avatar mmetak avatar suchipi avatar orafilynie avatar shatur avatar vperus avatar khuei avatar code-factor avatar eti0 avatar luizoti avatar mleyen avatar monosans avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.