[FREE] [OX] Target New NUI with Animation

ox :eye: target will Rotate and Infinite Color Change

eyetarget

Step 1 :
Open the file located at ox_target\web\index.html

Step 2 :
Find the appropriate location in the HTML code where you need to find SVG <svg and </svg>.

Step 3 :
Replace this line on between SVG Code.
<svg id="eyeSvg" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 496 512" width="30px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"/> <path d="M323 262.1l-.1-13s21.7-19.8 21.1-21.2l-9.5-20c-.6-1.4-29.5-.5-29.5-.5l-9.4-9.3s.2-28.5-1.2-29.1l-20.1-9.2c-1.4-.6-20.7 21-20.7 21l-13.1-.2s-20.5-21.4-21.9-20.8l-20 8.3c-1.4.5.2 28.9.2 28.9l-9.1 9.1s-29.2-.9-29.7.4l-8.1 19.8c-.6 1.4 21 21 21 21l.1 12.9s-21.7 19.8-21.1 21.2l9.5 20c.6 1.4 29.5.5 29.5.5l9.4 9.3s-.2 31.8 1.2 32.3l20.1 8.3c1.4.6 20.7-23.5 20.7-23.5l13.1.2s20.5 23.8 21.8 23.3l20-7.5c1.4-.6-.2-32.1-.2-32.1l9.1-9.1s29.2.9 29.7-.5l8.1-19.8c.7-1.1-20.9-20.7-20.9-20.7zm-44.9-8.7c.7 17.1-12.8 31.6-30.1 32.4-17.3.8-32.1-12.5-32.8-29.6-.7-17.1 12.8-31.6 30.1-32.3 17.3-.8 32.1 12.5 32.8 29.5zm201.2-37.9l-97-97-.1.1c-75.1-73.3-195.4-72.8-269.8 1.6-50.9 51-27.8 27.9-95.7 95.3-22.3 22.3-22.3 58.7 0 81 69.9 69.4 46.4 46 97.4 97l.1-.1c75.1 73.3 195.4 72.9 269.8-1.6 51-50.9 27.9-27.9 95.3-95.3 22.3-22.3 22.3-58.7 0-81zM140.4 363.8c-59.6-59.5-59.6-156 0-215.5 59.5-59.6 156-59.5 215.6 0 59.5 59.5 59.6 156 0 215.6-59.6 59.5-156 59.4-215.6-.1z"/> </svg>

Step 4 :
Paste this line below closed</html>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">

#eyeSvg {
  width: 36px;
  height: 36px;
  background-size: cover;
  animation: fire 1s infinite, colorchange 1s infinite;
}

@keyframes fire {
  0% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  25% {
    opacity: 0.5;
    transform: rotate(180deg) scale(1.2);
  }
  50% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
  75% {
    opacity: 0.5;
    transform: rotate(-180deg) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes colorchange {
  0% {
    fill: #09ff00; /* initial color */
  }
  25% {
    fill: #00ff00; /* intermediate color */
  }
  50% {
    fill: #00ffff; /* intermediate color */
  }
  75% {
    fill: #0000ff; /* intermediate color */
  }
  100% {
    fill: #ff00cc; /* final color */
  }
}
</style>

Step 5 :
If you can’t understand this code, just download this file and replace in ox_target\web\index.html
index.html (2.4 KB)

:heart: Sharing Is Caring
:+1: Like it .

14 Likes

very cool! Do you have plans to add more looks?

1 Like

yes . working on it

Shape changes will be even better

Can you do a NP type one ? :smiley:

for nopixel ?
sure but need np target file to work

No let me refrain sorry haha.

Mostly inspired of. Like with this eye
2f4cc42912e2d21d19393afc3fd11b70
for example. Most of people I know want to change the ox_target to this but since it’s not svg etc. they are lazy. ( to be honest I am lazy as well… )

It’s mostly inspired from NoPixel.