Pharma Capsule Animation Using Html Css and Svg

In this tutorial, we will explore how to design and animate a pharmaceutical capsule using the power of HTML, CSS, and Scalable Vector Graphics (SVG). You will learn, how to craft an engaging and visually appealing capsule animation for pharmaceutical or healthcare-related projects. Whether you're a beginner or an experienced web developer, this tutorial will provide insights and techniques to bring your animations to life. Let's dive in and discover the art of Pharma Capsule Animation!

01. Html
02. CSS
03. Output

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Pharma Capsule Animation Using Html Css and Svg</title>
 </head>
 <body>
	// Content
 </body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
<title>Pharma Capsule Animation Using Html Css and Svg</title>
</head>
<body>
  
    <div class="wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" class="pill" width="720" height="720" viewBox="0 0 720 720" aria-labelledby="title">
          <title id="title" lang="en">
            Isometric illustration of medicine
          </title>
          <path class="background" d="M0 0h720v720H0z" />
          <g id="bg">
            <path class="bg-fill" d="m244.15 354.5 14.23-12.8 16.15-20.69 12.68-21.29 8.97-20.1 3.59-17.22 1.07-11.84-3.71-9.1-8.37-2.15-32.89-7.77-35.53 23.44-19.85 45.58-2.76 37.67 31.94 18.9 14.48-2.63z" />
            <path class="bg-rim" d="M256.32 345.64c18.21-19.61 27.6-37.2 27.75-37.45 23.81-43.81 19.14-60.67 16-65.88a8.57 8.57 0 0 0-3.15-3.06l-.12-.07-2.23 4c3 1.52 4.65 5.53 4.65 11.73 0 12.62-6.83 32.63-17.8 52.21-5.42 10.88-18.12 27.12-24.3 33.3-4.08 4.08-4.22 4.61-6.61 6.63-7.52 6.32-14 9-18.16 7.38l-2.25 4a12.42 12.42 0 0 0 3.51.52c6.33.05 13.94-4.44 22.71-13.31Z" />
          </g>
          <g id="mg">
            <circle class="ball-b-w-2" cx="151.71" cy="231.54" r="36.31" />
            <path class="ball-gr-2" d="m598.92 451-1.44-.39a24.9 24.9 0 0 0-5.77-.68A24.63 24.63 0 0 0 570.46 487c.26.44.52.87.8 1.28A24.64 24.64 0 1 0 598.92 451Z" />
            <path class="ball-p-2" d="M163.13 248.76c-.48-.14-1-.27-1.45-.38a24.29 24.29 0 0 0-5.76-.69 24.63 24.63 0 0 0-21.25 37.1c.25.44.52.87.8 1.29a24.64 24.64 0 1 0 27.66-37.32Z" />
            <circle class="ball-b-1" cx="197.73" cy="272.33" r="11.21" />
            <circle class="ball-b-w-1" cx="495.35" cy="459.81" r="24.35" />
            <circle class="ball-b-3" cx="201.33" cy="226.92" r="20.77" />
            <circle class="ball-b-2" cx="551.98" cy="486.3" r="21.93" />
            <circle class="ball-p-1" cx="555.17" cy="441.49" r="11.9" />
            <circle class="ball-gr-1" cx="210.9" cy="245.24" r="11.21" />
          </g>
          <g id="fg">
            <path class="pink-cap" d="M635.15 445.33c-5.38-12.54-17.78-21.21-17.78-21.21l-28-16.08-96.27-55.76c-11-6.28-25.83 7.43-37.33 21.76a231.21 231.21 0 0 0-17.91 26.09c-3.92 7.19-7.07 13.67-9.59 19.49-17.2 39.69-5.05 49-5.05 49L550.45 541s47.7 22.13 80.29-31.2c15.56-25.44 10.47-50.32 4.41-64.47Z" />
            <g class="black-cap">
              <path d="M232.14 354.36c-3.26-1.38-5-5.51-5-11.93a55 55 0 0 1 1.27-11 118.85 118.85 0 0 1 6.05-19.4 192.7 192.7 0 0 1 18.21-34.49 167.18 167.18 0 0 1 11-14.81c.82-1 1.63-1.92 2.44-2.82 9.94-11.21 19.1-17.48 25.26-17.48a7.45 7.45 0 0 1 2.63.45 5.52 5.52 0 0 1 .54.28l2.23-4-120-68.29a59.65 59.65 0 0 0-25.1-7.81c-17.1-1.25-42.49 3.58-62.17 35.79-17.17 28.07-8.83 54.88-4.45 65.1a44.55 44.55 0 0 0 6.17 10.12 58.52 58.52 0 0 0 16.85 14.26l23 13.24 96.27 55.76a12 12 0 0 0 2.63 1.1l2.25-4Z" />
            </g>
          </g>
        </svg>
      </div>

<script src="script.js"></script>
</body>
</html>

The document structure is typical HTML, including <html>, <head>, and <body> elements.
Inside the <head>, there's a title for the web page.
Within the <body>, there is a <div> element with the class "wrapper". This <div> contains an SVG graphic depicting a pharmaceutical capsule.
The SVG graphic includes various paths and circles, each with different classes for styling. It represents the capsule in different colors and shapes.

Read Also:

CSS:

:root {
    --black: #000;
    --white: #fff;
    --pink: #ee529c;
    --light-pink: #ec8dba;
    --grey: #bcbec0;
    --bg-color: #dfdfdf;
  
    --duration: 5s;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  .wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .pill {
    width: 100%;
    height: 100%;
    max-width: 720px;
    max-height: 720px;
  }
  
  .background {
    fill: var(--bg-color);
  }
  
  .black-cap,
  .bg-rim {
    fill: var(--black);
  }
  
  .bg-fill {
    fill: var(--white);
  }
  
  .pink-cap {
    fill: var(--pink);
  }
  
  @layer ball-colors {
  
    .ball-gr-1,
    .ball-gr-2 {
      fill: var(--grey);
    }
  
    .ball-p-1,
    .ball-p-2 {
      fill: var(--light-pink);
    }
  
    .ball-b-1,
    .ball-b-2,
    .ball-b-3 {
      fill: var(--black);
    }
  
    .ball-b-w-1,
    .ball-b-w-2 {
      stroke: var(--black);
      fill: var(--white);
      stroke-width: 4;
      stroke-miterlimit: 10;
    }
  }
  
  @layer ball-animations {
    .ball-gr-1 {
      --factor: 0.5;
      animation: move-right calc(var(--duration) * var(--factor)) 0s both;
    }
  
    .ball-gr-2 {
      --factor: 2;
      animation: move-left-gr-2 calc(var(--duration) * var(--factor)) 1.89s both;
    }
  
    .ball-p-1 {
      --factor: 0.333;
      --stagger: calc(var(--duration) - calc(var(--factor) * 3));
      animation: move-left calc(var(--duration) * var(--factor)) 4.56s both;
    }
  
    .ball-p-2 {
      --factor: 0.8;
      animation: move-right calc(var(--duration) * var(--factor)) 8s both;
    }
  
    .ball-b-1 {
      --factor: 0.5;
      animation: move-right calc(var(--duration) * var(--factor)) 2.3s both;
    }
  
    .ball-b-2 {
      --factor: 0.2;
      animation: move-left calc(var(--duration) * var(--factor)) 6s both;
    }
  
    .ball-b-3 {
      --factor: 0.7;
      animation: move-right calc(var(--duration) * var(--factor)) 1.5s both;
    }
  
    .ball-b-w-1 {
      --factor: 0.3;
      animation: move-left calc(var(--duration) * var(--factor)) 3s both;
    }
  
    .ball-b-w-2 {
      --factor: 0.333;
      animation: move-right calc(var(--duration) * var(--factor)) 1s both;
    }
  
    .ball-b-1,
    .ball-b-2,
    .ball-b-3,
    .ball-p-1,
    .ball-p-2,
    .ball-b-w-1,
    .ball-b-w-2,
    .ball-gr-1,
    .ball-gr-2 {
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      will-change: transform;
    }
  }
  
  @keyframes move-right {
    from {
      transform: none;
    }
  
    to {
      transform: translateX(48.61%) translateY(28.47%);
    }
  }
  
  @keyframes move-left {
    from {
      transform: none;
    }
  
    to {
      transform: translateX(-48.61%) translateY(-28.47%);
    }
  }
  
  @keyframes move-left-gr-2 {
    from {
      transform: none;
    }
  
    to {
      transform: translateX(-52.78%) translateY(-28.47%);
    }
  }

Custom Variables: :root defines custom variables for colors and animation duration.
Basic Styling:
body and .wrapper styles remove margins and center content.
.pill sets maximum dimensions for a pill-shaped SVG container.
.background, .black-cap, .bg-rim, .bg-fill, .pink-cap styles various parts of the SVG.
Ball Colors:
@layer ball-colors defines the colors for different elements, like grey, light pink, and black.
Ball Animations:
@layer ball-animations defines animations for different ball elements, moving them left or right at different durations.
Each ball element has its animation properties defined based on a custom factor and duration.
animation-direction, animation-iteration-count, and other properties control the animation behavior.
Keyframes:
@keyframes rules (move-right, move-left, move-left-gr-2) define animation transformations for moving elements.

Output:

Read Also:

Output:

Read Also:

Code Credit: pjosxyz

Archive