Playground
Interactive tools & prototypes
Interactive tools & prototypes
A collection of live projects I build & design from scratch using a compilation of design & AI tools
A collection of live projects I build & design from scratch using a compilation of design & AI tools
Colour Token Generator
Colour Token Generator
Colour Token Generator
Quickly generate tokens for your design system using the tool below
Quickly generate tokens for your design system using the tool below
Token Group Name
Built by Syed Rahman
Sorry! This tool only works on a larger screen at the moment
Easy filter applier
Easy filter applier
Easily apply basic filters to images and download them
Easily apply basic filters to images and download them
Add an image
Click or drag and drop
Black & White
Sepia
High Contrast
Brighten
Soft Blur
Invert
Built by Syed Rahman
Custom Sampler
Custom Sampler
Record a custom sample and play on the piano with your computer keyboard
Record & play a custom sample
Octave 3
Sorry! This tool only works on a larger screen at the moment
Built by Syed Rahman
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 9.98 13.968 L 12.148 13.968 L 2.168 0 L 0 0 Z" fill="rgb(0, 0, 0)" height="13.96777px" id="CuxmuqiWu" transform="translate(9.92 9.04)" width="12.147559999999999px"/><path d="M 27 0 C 29.761 0 32 2.239 32 5 L 32 27 C 32 29.761 29.761 32 27 32 L 5 32 C 2.239 32 0 29.761 0 27 L 0 5 C 0 2.239 2.239 0 5 0 Z M 22.067 8 L 16.895 13.883 L 12.764 8 L 8 8 L 14.247 16.895 L 8 24 L 9.412 24 L 14.873 17.788 L 19.236 24 L 24 24 L 17.522 14.775 L 23.479 8 Z" fill="rgb(0, 0, 0)" height="32px" id="h__8D8MsD" width="32px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 32 0 L 32 32 L 0 32 Z M 8.2 13.3 L 8.2 24 L 11.6 24 L 11.6 13.3 Z M 8 9.9 C 8 11 8.8 11.8 9.9 11.8 C 11 11.8 11.8 11 11.8 9.9 C 11.8 8.8 11 8 9.9 8 C 8.9 8 8 8.8 8 9.9 Z M 20.6 24 L 23.8 24 L 23.8 17.4 C 23.8 14.1 21.8 13 19.9 13 C 18.2 13 17 14.1 16.7 14.8 L 16.7 13.3 L 13.5 13.3 L 13.5 24 L 16.9 24 L 16.9 18.3 C 16.9 16.8 17.9 16 18.9 16 C 19.9 16 20.6 16.5 20.6 18.2 Z" fill="rgb(0, 0, 0)" height="32px" id="qhCVY6BXN" width="32px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 5 0 L 27 0 C 29.761 0 32 2.239 32 5 L 32 27 C 32 29.761 29.761 32 27 32 L 5 32 C 2.239 32 0 29.761 0 27 L 0 5 C 0 2.239 2.239 0 5 0 Z M 16.692 12.007 C 15.259 12.603 12.395 13.837 8.1 15.708 C 7.402 15.986 7.037 16.257 7.004 16.522 C 6.948 16.971 7.509 17.147 8.274 17.388 C 8.378 17.42 8.486 17.454 8.596 17.49 C 9.348 17.735 10.36 18.021 10.886 18.032 C 11.363 18.042 11.896 17.846 12.484 17.442 C 16.497 14.733 18.568 13.364 18.698 13.334 C 18.79 13.314 18.917 13.287 19.003 13.364 C 19.09 13.44 19.081 13.585 19.072 13.624 C 19.016 13.861 16.812 15.911 15.672 16.971 C 15.316 17.301 15.064 17.536 15.012 17.59 C 14.897 17.71 14.779 17.823 14.666 17.932 C 13.967 18.606 13.443 19.111 14.695 19.936 C 15.297 20.332 15.778 20.66 16.258 20.987 C 16.783 21.345 17.306 21.701 17.983 22.145 C 18.155 22.258 18.32 22.375 18.481 22.489 C 19.091 22.925 19.639 23.315 20.317 23.253 C 20.711 23.217 21.117 22.847 21.324 21.743 C 21.812 19.133 22.771 13.48 22.993 11.15 C 23.012 10.946 22.988 10.685 22.968 10.57 C 22.949 10.456 22.908 10.292 22.759 10.171 C 22.582 10.028 22.31 9.998 22.188 10 C 21.634 10.01 20.783 10.306 16.692 12.007 Z" fill="rgb(0, 0, 0)" height="32px" id="rIXRtxXsW" width="32px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 27 0 C 29.761 0 32 2.239 32 5 L 32 27 C 32 29.761 29.761 32 27 32 L 5 32 C 2.239 32 0 29.761 0 27 L 0 5 C 0 2.239 2.239 0 5 0 Z M 21.502 10.084 C 20.117 8.793 18.306 8 16.15 8 C 13.022 8 10.317 9.793 9.001 12.407 C 8.459 13.487 8.15 14.709 8.15 16 C 8.15 17.291 8.459 18.513 9 19.593 C 10.317 22.207 13.022 24 16.15 24 C 18.31 24 20.121 23.284 21.445 22.062 C 22.957 20.669 23.83 18.618 23.83 16.182 C 23.83 15.615 23.779 15.069 23.685 14.546 L 16.15 14.546 L 16.15 17.64 L 20.455 17.64 C 20.27 18.64 19.706 19.487 18.859 20.055 C 18.143 20.535 17.226 20.818 16.15 20.818 C 14.066 20.818 12.302 19.411 11.673 17.52 C 11.513 17.04 11.423 16.527 11.423 16 C 11.423 15.473 11.514 14.96 11.674 14.48 C 12.303 12.589 14.066 11.182 16.15 11.182 C 17.324 11.182 18.379 11.585 19.208 12.378 Z" fill="rgb(0, 0, 0)" height="32px" id="bwCvh6oG1" width="32px"/></svg>)
© 2026 Syed Rahman. All rights reserved.
© 2026 Syed Rahman. All rights reserved.