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!
Table Of Contents
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:
- 3D Airplane Animation With Mouse Parallax Effect Using Html Css And Gsap
- Crazy Toggle Button Animation Using Css Only
- Email Envelope Design Using Html Css Only
- Heart-Shape Design with Heartbeat Effect Using Html and Css
- Loader Inside The Square Box Using Html Css Only
- Responsive Newsletter Subscription Form Design | HTML And CSS
- SVG Hamburger Menu Using Html Css And Javascript
- Simple Heading With Hover Effect Using Html Css Only
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:
Read Also:
- Blurred Image Background | HTML And CSS
- Image Drag And Drop Animation | HTML And CSS
- Image Overlay Effect On Hover | HTML And CSS
- Image Zoom On Hover | HTML And CSS
- Split Image On Hover | HTML And CSS
- Swap Image On Hover | HTML, CSS And jQuery
- Bookmark Interaction Animation | Html Css And Gsap
- Cursor Animation With Hover Effect Using GSAP | HTML, CSS And GSAP
- Full Screen Responsive Navigation Bar | HTML, CSS And GSAP
- Gaming CPU Landing Page Design Using GSAP | HTML, CSS And GSAP
- Page Loading With Intro Using GSAP | HTML, CSS And GSAP
- Page Transition Animation Using GSAP | HTML, CSS And GSAP
- Responsive Portfolio Landing Page | HTML, CSS, jQuery And GSAP
- Website Loader Animation Using GSAP | HTML, CSS And GSAP
Code Credit: pjosxyz
Comments
Post a Comment