Rotating Radial Stripes With CSS

Radial Stripes can be quite fancy when used right in web-design. In this tutorial you will learn how to create animated, rotating radial stripes with CSS.

4413 views

By. Jacob

Edited: 2019-10-14 13:09

I recently had the idea to create animated Radial Stripes on a site I am designing. I wanted the stripes to be rotating, which is easy enough to do with CSS animations. Creating the stripes was actually harder, since I usually do not use Adobe programs. I am a fast learner, so I quickly figured out how to create the stripes in Illustrator.

To save you the time, you may download the SVG file from this article, and then move on to playing with the CSS. Personally, I think the coding is more important than working with graphics software in web-design, since you will be able to do most with pure HTML and CSS.

See the live example here: Rotating Radial Stripes Example

The below CSS is for the animation and inclusion of the radial stripes:

body .radial_stripes { /* Radial Stripes elements in the "body" part of the page */
  position:absolute;
  top:0;
  left:0;
  width:30vw;
  height:30vw;
  opacity:0.4;
  animation:rotate 60s infinite linear;
}

/* Images for re-use via classes */
.radial_stripes {background:url('radial-stripes.svg');}

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

The HTML can look like this:

<!doctype html>
<html lang="en">
  <head>
    <title>Rotating Radial Stripes Example | Beamtic</title>
    <link rel="stylesheet" type="text/css" href="rotating-radial-stripes.css">
  </head>

  <body>
      <div class="radial_stripes"></div>
  </body>

 </html>

Radial Stripes as SVG or PNG

Download both .SVG and PNG files here.

Transparrent Radial Stripes SVG with gradient, can be freely used in your own project.

The radial stripes image file needs to be transparrent. Considering that most browsers will support SVG just fine, you may want to go with SVG (vector based). Alternatively, you can use a PNG for backwards compatibility with older browsers.

For further optimization, you can also utilize data URIs. This will save HTTP requests and speed up the loading of your image. PNG images needs to be base64 encoded, but SVG files do not, since they do not contain special characters. The below code embeds a SVG file in your CSS:

.radial_stripes {background:url('data:image/svg+xml;utf8,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1003.97 1009.5"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#radial-gradient);}</style><radialGradient id="radial-gradient" cx="615.23" cy="557.75" r="503.37" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.5"/><stop offset="1" stop-color="#333" stop-opacity="0"/></radialGradient></defs><title>radial-stripes</title><path class="cls-1" d="M615.23,53V557.75L510.29,64ZM318.54,149.4,615.23,557.75,409.93,96.64Zm-140.44,156L615.23,557.75,240.13,220ZM113.24,505l502,52.76-480-156Zm21.94,208.74,480.05-156-502,52.76Zm105,181.76,375.1-337.74L178.1,810.13Zm169.8,123.37,205.3-461.11L318.54,966.1Zm205.3,43.64V557.75L510.29,1051.47Zm205.3-43.64L615.23,557.75l104.94,493.72Zm169.8-123.37L615.23,557.75,911.91,966.1Zm104.94-181.76-480-156,437.13,252.38ZM1117.21,505l-502,52.76,502,52.76Zm-64.85-199.62L615.23,557.75l480-156Zm-140.45-156L615.23,557.75,990.33,220ZM720.17,64,615.23,557.75,820.53,96.64Z" transform="translate(-113.24 -53)"/></svg>');}

The above class should be applied to the div element containing the radial stripes. I used it in a class in case I needed to use it multiple places on the page.

Width and height on the div element

Next we will also need to give the div a width and height, otherwise the image simply will not show up. You may be surprised to know that many will forget this, and wonder why their backgrounds does not show up. The problem is that the element will be "collapsed" without. Anyway, we will also call the animation itself in this part.

#site_header .radial_stripes {
  width:40vw;
  height:40vw;
  animation:rotate 30s infinite linear;
}

I used VW units since they are ideal for SVG images, and since I wanted to use it as a decorative background. Often you may want to use pixels instead. Do not use VW as a one-size-fits-all unit. VW will simply mess a design when desktop users are resizing the browser window.

Making the radial stripes rotate

The animation itself is activated with the animation property. In this case, I named my animation "rotate", told it that a full rotation should last 30 seconds, continue infinitely, and have a linear progression. You can read much more about the animation property elsewhere, so I will not go into too much details here.

The animation keyframes is called via the animation property from before, the code makes use of the transform property. Here I simply tell the browser to rotate from 0 degrees to 360 degrees, which makes it a full rotation. The from and to keywords are self-explanatory. Code follows:

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

That is everything. You can see a live example of this code here: Rotating Radial Stripes Example

Correct use of elements

Semantically it can be important that you use a div element, since this makes it anonymous, and as such ideal to be used for decoration images.

It is also fine to use semantic elements, but you should make sure your use does not interfere with the intended use of these elements. Do not just use a header element because you think it fits the purpose. If you apply a background to a semantic element, make sure you actually want the element for semantic purposes.

Sorry about that small rant, but I often see people abusing elements :-D

Radial Stripes as SVG or PNG

Width and height on the div element

Making the radial stripes rotate

Correct use of elements

Tell us what you think: