CODEWITHSUNDEEP
javascriptcsshtml
Phoesarah
Phoesarah

Reputation: 33

How can I do a generated image on a website?

I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible? Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over? Not sure where to start looking? Thanks for any help.

Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png

Upvotes: 1

Views: 41

Answers (1)

Brad
Brad

Reputation: 163436

SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>

Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.

If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.

Upvotes: 2

Related Questions