Dynamic pattern in javascript

Question

I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.

What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.

I know of a roundabout way to do it with svg but where would I start for javascript/jquery?

enter image description here

Replicate it with code? With an image? Add some more information about what you want to achieve — Alejandro Urbano Alvarez
– Alejandro Urbano Alvarez, Commented Apr 11, 2014 at 9:59
@aurbano I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line it will calculate the image. — Allreadyhome
– Allreadyhome, Commented Apr 11, 2014 at 10:03
So, as you know how the solution with SVG works, you know how to replicate the interactive functionality and just wonder how to create the image with non-SVG? — Bergi
– Bergi, Commented Apr 15, 2014 at 10:12

Bergi · Accepted Answer · 2014-04-15 10:21:09Z

1

I know of a way to do it with svg but where would I start for javascript/jquery?

Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:

There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.

answered Apr 15, 2014 at 10:21

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic pattern in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related