https://github.com/ashkyd/isolib

An experimental SVG sprite recolouring project.
https://github.com/ashkyd/isolib

Last synced: about 1 month ago
JSON representation

An experimental SVG sprite recolouring project.

• Host: GitHub
• URL: https://github.com/ashkyd/isolib
• Owner: AshKyd
• Created: 2013-04-15T01:44:29.000Z (over 11 years ago)
• Default Branch: main
• Last Pushed: 2024-10-17T09:04:56.000Z (2 months ago)
• Last Synced: 2024-10-19T11:28:21.279Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 934 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
A SVG recolouration demo, showing the power of vector graphics.

## What is it?

SVG is an XML-based vector graphics language. This makes it easy for us

to manipulate attributes such as individual colours and lines within the

graphic.

This demo manipulates a SVG using a particular colour map in order to

create many colour variations of the same sprite. Furthermore, the demo

manages a filter over the overall colours in order to create night and

day variations.

![The screenshot shows a sprite colourised per the interface](public/screenshot.webp)

## The Code

To illustrate my point, you can create a variation with the following

code:

    const svg = paint(svg, {

    	primary : '#ff0000',

    	secondary : '#0000ff',

    	time : 13

    });

This demo recolours one of the image templates to be a primarily red

sprite with blue highlight colours as it would appear at 1 PM.

You can then add the SVG to the DOM the following code, for instance:

    $('body').append(svg);

# The future

This demo uses string replacement to change colours in an image which is

fast but has limitations in terms of functionality.

In the future I may implement an XML parsing version in order to

introduce advanced functionality such as manipulating attributes and

creating lighting effects.

# See Also

Check out [isoCan](http://isocan.kyd.com.au/), an experimental isometric

HTML5 rendering engine.