Vector Star Eye

Developer
Chris Johnson
Size
1,788 Kb
Views
24,288
  1. Vector Star Eye Previews
  2. Vector Star Eye HTML Codes
  3. Vector Star Eye CSS Codes

How do I make an vector star eye?

Simple hover effect. What is a vector star eye? How do you make a vector star eye? This script and codes were developed by Chris Johnson on 01 October 2022, Saturday.

Vector Star Eye Previews
IQ Test

Vector Star Eye - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vector Star Eye</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="graphicContainer"> <svg class="vectorStarEye" viewbox="0 0 100 100"> <path class="centerDot" d="M 58,50 a 8,8 0 1 1 -16,0 8,8 0 1 1 16,0 z"></path> <path class="point top" d="M 50,38 57.5,30 50,6 42.5,30 z"></path> <path class="point right" d="M 62,50 70,57.5 94,50 70,42.5 z"></path> <path class="point bottom" d="M 50,62 57.5,70 50,94 42.5,70 z"></path> <path class="point left" d="M 38,50 30,57.5 6,50 30,42.5 z"></path> </svg>
</div>
</body>
</html>

Vector Star Eye - Script Codes CSS Codes

.graphicContainer { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px;
}
.vectorStarEye {	width: 100%;	height: 100%;	fill: #333; -webkit-filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.3));
}
.vectorStarEye path {	transform-origin: 50px 50px;	transition: all 400ms;
}
.vectorStarEye .point {	transform: rotate(0deg) scale(0.67);
}
.vectorStarEye:hover {	fill: #e91e63;
}
.vectorStarEye:hover .centerDot {	fill: #ffc107;	transform: scale(0.9);
}
.vectorStarEye:hover .point {	transform: rotate(180deg) scale(1.13);
}
Vector Star Eye - Script Codes
Vector Star Eye - Script Codes
Home Page Home
Developer Chris Johnson
Username jhnsnc
Uploaded October 01, 2022
Rating 3
Size 1,788 Kb
Views 24,288
Do you need developer help for Vector Star Eye?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Johnson (jhnsnc) Script Codes
Name
Text Effect - Radius
F Loader
Text Effect - Optimist
Headlander Title Animation
Bluemix Logo Scratch Animation
Incremental Delaunay Triangulation Demo
Web Animation Test
Colorized Perlin Noise Generator
HAL9000
Tesselation Transition
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!