Chidori Animation Effect in Pure CSS and HTML

This is a short CSS tutorial on how to create a Chidori, Raikiri, Thousand Birds, Lightning Blade jutsu from Naruto Shippuuden, developed by Hatake Kakashi and used a lot by Uchiha Sasuke. The principle is using several animated lightning images that rotate, scale and change opacity randomly. The problem with randomness in CSS is that only predefined numbers are used so there is currently no way to generate a random number in CSS when the page is loaded. The random values can be inserted by Javascript but I wanted to make the effect with no Javascript The code is quite simple:

#chidori
{
	width:100%;
	aspect-ratio: 1;
}

#circle {
	width: 12%;
	aspect-ratio: 1;
	background-color: white;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: blur(20px);
}

I have prepared a container div for Chidori and create the circle which will serve as the Chidori core around the hand. This is a standard way of creating a circle in CSS with border-radius. I have absolutely positioned the circle in the middle of the parent div and added a blur effect to make it more like a glowing light.

.lightning
{
	width:100%;
	position:absolute;
	aspect-ratio: 1;
	background-size: contain;
	background-repeat: no-repeat;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-filter: drop-shadow(0px 0px 50px rgba(0, 150, 255, 1.0)) drop-shadow(0px 0px 20px rgba(0, 150, 255, 1.0)) blur(3px);
        filter: drop-shadow(0px 0px 50px rgba(0, 150, 255, 1.0)) drop-shadow(0px 0px 20px rgba(0, 150, 255, 1.0)) blur(3px);
}

#lightning1
{
	background-image: url('./lightning1.svg');
	animation-name: lightning1anim;
}

#lightning2
{
	background-image: url('./lightning2.svg');
	animation-name: lightning2anim;
}

#lightning3
{
	background-image: url('./lightning3.svg');
	animation-name: lightning3anim;
}

#lightning4
{
	background-image: url('./lightning4.svg');
	animation-name: lightning4anim;
}

Here I have created a class for the lightning which is a rectangle with animation. The drop-shadow filter with blur creates the glow around the lightning. There are 4 lightning images I have drawn in Inkscape which will be used. The are available here, here, here, and here. Each lightning has its own animation frames so that during the 1 second animation defines in the lightning class, each keyframe will be used to transform the ligthtning.

@keyframes lightning1anim 
{
0%{opacity:0.533664;transform: rotate(41.7101deg) scale(0.766629);}
1%{opacity:0.345765;transform: rotate(342.328deg) scale(0.519086);}
2%{opacity:0.213853;transform: rotate(313.412deg) scale(0.599681);}
....
100%{opacity:0.680605;transform: rotate(236.549deg) scale(0.645789);}
}

@keyframes lightning1anim 
{
...

This is the part where randomness is created. This defines the animation of the lightning. Since we cannot create random sequence of animation I have prepared a a lot of keyframes with random values. The lightning is scaled, rotated, and made transparent randomly.

#include <iostream>
#include <stdlib.h>
#include <time.h>

float normRand()
{
    return static_cast<float>(rand())/RAND_MAX;
}

int main()
{
    srand (time(NULL));
    size_t steps{100};
    for(size_t i=0; i<steps+1; i++)
        std::cout << i*(100.0/steps) << "%{opacity:" << normRand() << ";transform: rotate(" << normRand()*360 << "deg) scale(" << normRand() << ");}" << std::endl;
}

Of course I didn't write all the keyframes manually. I created this simple C++ program to generate the random set of keyframes for each lightning.

<div id="chidori">
<div class="lightning" id="lightning1"><div id="circle"></div></div>
<div class="lightning" id="lightning2"></div>
<div class="lightning" id="lightning3"></div>
<div class="lightning" id="lightning4"></div>
</div>

And this is the layout of the elements in HTML. Note that the circle is placed in the first lightning. The reason is just so I don't have to repeat the animation, it uses the same animation as the lightning and is correctly positioned in the center.

And here is the result:

Keywords: naruto, anime, web, kakashi, sasuke
#naruto #css #chidori