1

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

Phoesarah
  • 33
  • 4

1 Answers1

2

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.

Brad
  • 159,648
  • 54
  • 349
  • 530