Ninja Blade HTML and CSS animation

In the ever-evolving realm of web design and development, creativity knows no bounds. Web developers and designers are continually pushing the boundaries of what’s possible, crafting interactive and captivating web experiences that leave users in awe. One such awe-inspiring spectacle is the Ninja Blade Animation, a feat of digital ninjutsu created with the power of HTML and CSS.

You can find how to install and get started with Visual Studio code by checking out my tutorial – Running HTML using Live server in Visual Studio Code Editor – Salow Studios

CSS Properties

Following are the CSS properties used:

Background-size: The background-size CSS property sets the size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space.”/><style media=”print

Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.”/><style media=”print

Margin-left: The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.”/><style media=”print

Content: The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.”/><style media=”print

-webkit-mask: The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.”/><style media=”print

Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.”/><style media=”print

Background-repeat: The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.”/><style media=”print

Inset: The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.”/><style media=”print

Height: The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.”/><style media=”print

Position: The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.”/><style media=”print

Transform: The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.”/><style media=”print

Color: The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.”/><style media=”print

Code Block for Ninja Blade creation

Here is the code for implementing the Ninja Blade Animation.

.ninja-blade {
        margin-left: 60px;
        width: 100px;
        height: 100px;
        color: #f72585;
        background: conic-gradient(
              from 165deg at top,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            top,
          conic-gradient(
              from 75deg at left,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            left,
          conic-gradient(
              from -15deg at bottom,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            bottom,
          conic-gradient(
              from -105deg at right,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            right;
        background-size: 100% 50%, 50% 100%;
        -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
        background-repeat: no-repeat;
        
      }
      .ninja-blade:before {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        transform: rotate(45deg);
      }

Yay! We have created the static Ninja Blade Animation.

Here is the output:

CSS Animation Ninja Blade HTML and CSS animation

spin animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes  spin {
        100% {
          transform: rotate(1turn);
        }
      }

The following way is to declare the CSS Class inside the class block.

 .ninja-blade {
        margin-left: 60px;
        width: 100px;
        height: 100px;
        color: #f72585;
        background: conic-gradient(
              from 165deg at top,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            top,
          conic-gradient(
              from 75deg at left,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            left,
          conic-gradient(
              from -15deg at bottom,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            bottom,
          conic-gradient(
              from -105deg at right,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            right;
        background-size: 100% 50%, 50% 100%;
        -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
        background-repeat: no-repeat;
        animation: spin 1.5s infinite linear;
      }
      .ninja-blade:before {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        transform: rotate(45deg);
      }

      @keyframes spin {
        100% {
          transform: rotate(1turn);
        }
      }

Following is the output for Ninja Blade Animation animation.

Video Tutorial

You can find the complete coding tutorial in the following YouTube Short video.

Complete Code Ninja Blade using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .ninja-blade {
        margin-left: 60px;
        width: 100px;
        height: 100px;
        color: #f72585;
        background: conic-gradient(
              from 165deg at top,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            top,
          conic-gradient(
              from 75deg at left,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            left,
          conic-gradient(
              from -15deg at bottom,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            bottom,
          conic-gradient(
              from -105deg at right,
              #0000,
              currentColor 1deg 30deg,
              #0000 31deg
            )
            right;
        background-size: 100% 50%, 50% 100%;
        -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
        background-repeat: no-repeat;
        animation: spin 1.5s infinite linear;
      }
      .ninja-blade:before {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        transform: rotate(45deg);
      }

      @keyframes spin {
        100% {
          transform: rotate(1turn);
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Ninja Blade Animation</h1>
    <div class="ninja-blade"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Ninja Blade Animation Animation using CSS and HTML. See you in next tutorial!