How is this functionality implemented?
There are many prepared pictures that are docked and changed.
Open dev-tools and poke your example. Specifically, the blocks of the house are implemented in the form of svg, which is then painted using css fill.Lila Mills
https://developer.mozilla.org/en/docs/Web/API / Canv ...
https://github.com/mdn/dom -examples / blob / master / ca ...
A subtle hint of a possible solution.
The most difficult thing will be to prescribe the palette + line up the source.
Example: the top is red, the left is green, and the right is blue.
We have a replacement area - 3 pieces. Each of the areas finds a specific color and replaces it with a color from the palette (here the main thing is to delve into the canvas API in order to return as it was or two canvases, where the upper one changes, and the lower one remains basic).
Well, this is in general terms, but I think the principle is clear.Anonymous
It all depends on the hands of the programmer, such a project can be done in a day or a week, these are just different pictures prepared :)Anonymous
To place the code, please use CodePen or similar tool. Thanks you!