Published on

A Complete Guide To Build A Circular SVG Showreel (css Only) With Tailwind CSS

Tags
Circular SVG Showreel (css only)

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom user interfaces. It provides a set of pre-defined classes that you can use to style your HTML elements without writing any CSS code. With Tailwind CSS, you can create responsive and mobile-first designs with ease.

The description of Circular SVG Showreel (css only) ui component

A Circular SVG Showreel is a user interface component that displays a set of images or icons in a circular shape. The images rotate around the center of the circle, creating an animated effect. This component is commonly used in portfolio websites, product showcases, and other creative projects.

Why use Tailwind CSS to create a Circular SVG Showreel (css only) ui component?

Tailwind CSS provides a set of pre-defined classes that you can use to create a Circular SVG Showreel with ease. You can use the built-in classes to style the individual images, the circle container, and the animation effects. With Tailwind CSS, you don't have to write any custom CSS code, which saves you time and effort.

The preview of Circular SVG Showreel (css only) ui component.

Free download of the Circular SVG Showreel (css only)'s source code

The source code of Circular SVG Showreel (css only) ui component.

<div class='flex items-center justify-center min-h-screen from-gray-100 via-gray-300 to-gay-500 bg-gradient-to-br'>
   <div class="relative w-full h-screen">
	<div class="absolute-center">
		<svg class="circle-svg" viewBox="0 0 500 500">
			<defs>
				<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250"
					id="textcircle_top">
					<animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 250 250"
						to="360 250 250" repeatCount="indefinite" />
				</path>
			</defs>
			<text class="circle-text" dy="70" textLength="1220">
				<textPath xlink:href="#textcircle_top">
					View Our Showreels View Our Showreels
				</textPath>
			</text>
		</svg>

	</div>
	<div class="absolute-center">
		<div class="showreels-div">
			<video class="showreels-video" loop autoplay muted>
				<source src='https://github.com/ahampriyanshu/gfg/raw/main/media/showreel.mp4' type="video/mp4" />
				<p>Please Update Your Browser</p>
			</video>
			<img
              alt="play"
              class="showreels-btn"
              src='https://github.com/ahampriyanshu/gfg/raw/main/media/play.png'
            />
          </div>
		</div>
	</div>
</div>
<style>
    		.showreels-btn {
			width: 25%;
			height: 25%;
			display: block;
			margin: 0;
			position: absolute;
			top: 50%;
			left: 55%;
			-ms-transform: translate(-55%, -50%);
			transform: translate(-55%, -50%);
		}

		.showreels-div:hover .showreels-video {
			display: block;
		}

		.showreels-div:hover .showreels-btn {
			display: none;
		}

        	.circle-text {
			font-size: 24px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 10px;
			fill: #333;
		}

		.showreels-div {
			height: 150px;
			width: 150px;
			border-radius: 100%;
		}

		.showreels-video {
			border-radius: 100%;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: none;
		}

        	.circle-svg {
			height: 350px;
			width: 350px;
		}
        .absolute-center {
			margin: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

</style>

How to create a Circular SVG Showreel (css only) with Tailwind CSS?

Step 1: Set up your HTML structure

The first step is to set up your HTML structure. You need to create a container for the circular showreel and add the individual images or icons as child elements. Here's an example:

<div class="flex justify-center items-center h-screen">
  <div class="w-64 h-64 rounded-full border-4 border-gray-500 relative">
    <img src="image1.png" class="absolute w-12 h-12 rounded-full top-0 left-0 transform -translate-x-1/2 -translate-y-1/2">
    <img src="image2.png" class="absolute w-12 h-12 rounded-full top-0 right-0 transform translate-x-1/2 -translate-y-1/2">
    <img src="image3.png" class="absolute w-12 h-12 rounded-full bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2">
    <img src="image4.png" class="absolute w-12 h-12 rounded-full bottom-0 right-0 transform translate-x-1/2 translate-y-1/2">
  </div>
</div>

In this example, we have created a container with a width and height of 64 pixels. We have also added a border and rounded corners to create a circular shape. Inside the container, we have added four images, each positioned at a different corner of the circle.

Step 2: Add Tailwind CSS classes

The next step is to add Tailwind CSS classes to style the individual images and the container. Here are some classes that you can use:

  • w-12 h-12: sets the width and height of the images to 12 pixels.
  • rounded-full: rounds the corners of the images to create a circular shape.
  • absolute: positions the images relative to the container.
  • top-0 left-0: positions the first image at the top-left corner of the container.
  • top-0 right-0: positions the second image at the top-right corner of the container.
  • bottom-0 left-0: positions the third image at the bottom-left corner of the container.
  • bottom-0 right-0: positions the fourth image at the bottom-right corner of the container.
  • transform: applies a transformation to the images to position them correctly in the circle.
  • translate-x-1/2: translates the images horizontally by half of their width.
  • translate-y-1/2: translates the images vertically by half of their height.

Step 3: Add animation effects

The final step is to add animation effects to the circular showreel. You can use the @keyframes rule in CSS to define the animation and the animation property to apply it to the container. Here's an example:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.container {
  animation: rotate 10s linear infinite;
}

In this example, we have defined an animation called rotate that rotates the container from 0 to 360 degrees. We have also applied the animation to the container using the animation property. The animation lasts for 10 seconds and repeats infinitely.

Conclusion

In this article, we have learned how to create a Circular SVG Showreel with Tailwind CSS. We have seen how Tailwind CSS provides a set of pre-defined classes that you can use to style your HTML elements without writing any custom CSS code. We have also seen how to add animation effects to the showreel using the @keyframes rule and the animation property. With these techniques, you can create stunning user interfaces that are both responsive and mobile-friendly.