Hi, VatsaDev here, my first blog post! Today I'll give you the best ways to create your own vector images and animations, in CSS.

whats the cool activities

• Creating a shaped ghost and animating it up!

Basic shapes

the basic shapes would be

• squares and rectangles
• circles and ovals
• Beans
• lines
• triangles

Colors

Shapes need colors, we'll be doing

• solid colors
• stripes
• linear gradients
• radial gradients
• conic gradients

so lets get started 😺!

squares and rectangles

squares and rectangles are the easiest shapes, they only use width and height.

we can set them like this:

.square {
  width: 100px;
  height: 100px;
  background-color: black;
}

this will make a black square. Now while you've probably already understood the rectangle code, i'll give it below.

.rect-wide {
  width: 500px;
  height: 100px;
  background-color: red;
}

.rect-tall {
  width: 100px;
  height: 500px;
  background-color: green;
}

Circles and ovals

these are pretty simple, all you need is

border-radius: 50%;

for example, a black circle:

.circle {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 50%;
}

ovals:

.oval-wide {
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

.oval-tall {
  width: 100px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
}

beans

I like calling them beans for fun, but they're known as rounded rectangles

here we just take a rectangle and set the property

border-radius: 50px;

here, 50% sets the shape fully round, with other values making the shape partially rounded.

lines

for horizontal lines you style the <hr /> element like this:

hr {
  height: 10px;
  background-color: black;
}

this will make a horizontal line 10px tall

for vertical lines we can make the .vl class as:

.vl {
  width: 1px;
  height: 10px; /*make this how tall you want the line to be*/
  border-right: 1px solid black; /*make this how wide you want the line to be*/
}

Triangles

we can make triangles with the border property

.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

colors

• solid: color: #000000
• stripes: background-image: linear-gradient(45deg, #EE617D 25%, #3D6F8E 25%, #3D6F8E 50%, #EE617D 50%, #EE617D 75%, #3D6F8E 75%, #3D6F8E 100%);
• linear: background: linear-gradient(#e66465, #9198e5);
• radial: background-image: radial-gradient(green, salmon);
• conic: background: conic-gradient(black, white);

the ghost

here's the ghost I said we would make!

code:

body {
  margin: 0;
  padding: 0;
  background-color: #2c3a47;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ghost {
  width: 140px;
  height: 160px;
  background-color: #f2f2f2;
  border-radius: 70px 70px 0 0;
  position: relative;
  cursor: pointer;
  animation: floating 2s infinite ease-in-out;
  box-shadow: 20px 20px 50px 10px #121212;
}

@keyframes floating {
  50% {
    transform: translateY(-50px);
  }
}

.face {
  width: 100px;
  position: absolute;
  top: 60px;
  left: calc(50% - 50px);
}

.eyes {
  height: 24px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 14px;
}

.eyes span {
  width: 24px;
  height: 24px;
  background-color: #2c3a47;
  border-radius: 50%;
  transition: 0.3s linear;
}

.ghost:hover .eyes span {
  height: 26px;
}

.mouth {
  width: 40px;
  height: 20px;
  background-color: #2c3a47;
  margin: auto;
  border-radius: 0 0 20px 20px;
  transition: 0.3s linear;
}

.ghost:hover .mouth {
  height: 30px;
}

.hands {
  width: 180px;
  position: absolute;
  left: -20px;
  top: 80px;
  display: flex;
  justify-content: space-between;
}

.hands span {
  width: 20px;
  height: 30px;
  background-color: #f2f2f2;
}

.hands span:first-child {
  border-radius: 20px 0 0 20px;
}

.hands span:last-child {
  border-radius: 0 20px 20px 0;
}

.feet {
  position: absolute;
  width: 100%;
  bottom: -20px;
  display: flex;
}

.feet span {
  flex: 1;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 0 0 20px 20px;
}

.feet span:first-child {
  border-radius: 0 0 20px 12px;
}

.feet span:last-child {
  border-radius: 0 0 12px 20px;
}

html

<div class="ghost">
  <div class="face">
    <div class="eyes"><span></span><span></span></div>
    <div class="mouth"></div>
  </div>

  <div class="hands"><span></span><span></span></div>

  <div class="feet">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Codepen demo:

Photo by Sai Kiran Anagani on Unsplash