SVG Icons: step 6

Developer
Benedikte Vanderweeën
Size
2,573 Kb
Views
4,048
  1. SVG Icons: step 6 Previews
  2. SVG Icons: step 6 HTML Codes
  3. SVG Icons: step 6 CSS Codes

How do I make an svg icons: step 6?

Step 6: create a css animation pulse - opacity changes. What is a svg icons: step 6? How do you make a svg icons: step 6? This script and codes were developed by Benedikte Vanderweeën on 21 January 2023, Saturday.

SVG Icons: step 6 Previews
IQ Test

SVG Icons: step 6 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Icons: step 6</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Ico neutral -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" id="ico-neutral">
<path d="M52.3,6.2c2.5,0,4.6,2.1,4.6,4.6v41.5c0,2.5-2.1,4.6-4.6,4.6H10.8c-2.5,0-4.6-2.1-4.6-4.6V10.8c0-2.5,2.1-4.6,4.6-4.6	H52.3 M52.3,1.6H10.8c-5.1,0-9.2,4.1-9.2,9.2v41.5c0,5.1,4.1,9.2,9.2,9.2h41.5c5.1,0,9.2-4.1,9.2-9.2V10.8	C61.5,5.8,57.4,1.6,52.3,1.6L52.3,1.6z"/>
<line x1="25.4" y1="41.7" x2="35.9" y2="41.7" />
<path d="M40,43H25.4c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h10.5c0.7,0,1.3,0.6,1.3,1.3S36.6,43,35.9,43z" id="mouth" />
<circle cx="21.5" cy="26.1" r="3.9"/>
<circle cx="39.8" cy="26.1" r="3.9"/>
</svg>
<!-- Ico success -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" id="ico-success">
<path d="M52.8,6.2c2.5,0,4.6,2.1,4.6,4.6v41.5c0,2.5-2.1,4.6-4.6,4.6H11.2c-2.5,0-4.6-2.1-4.6-4.6V10.8c0-2.5,2.1-4.6,4.6-4.6	H52.8 M52.8,1.6H11.2C6.1,1.6,2,5.8,2,10.8v41.5c0,5.1,4.1,9.2,9.2,9.2h41.5c5.1,0,9.2-4.1,9.2-9.2V10.8C62,5.8,57.9,1.6,52.8,1.6	L52.8,1.6z"/>
<path d="M31.1,47.2c-5.7,0-10.3-4.3-10.3-9.6c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5c0,3.6,3.2,6.5,7.2,6.5	s7.2-2.9,7.2-6.5c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5C41.4,42.9,36.8,47.2,31.1,47.2z"/>
<path d="M27.3,22.6c0,1.1-0.9,1.9-1.9,1.9h-6.7c-1.1,0-1.9-0.9-1.9-1.9l0,0c0-1.1,0.9-1.9,1.9-1.9h6.7	C26.4,20.7,27.3,21.6,27.3,22.6L27.3,22.6z"/>
<path d="M45.6,22.6c0,1.1-0.9,1.9-1.9,1.9h-6.7c-1.1,0-1.9-0.9-1.9-1.9l0,0c0-1.1,0.9-1.9,1.9-1.9h6.7	C44.7,20.7,45.6,21.6,45.6,22.6L45.6,22.6z"/>
</svg>
<!-- Ico failure -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" id="ico-failure">
<path d="M52.8,6.6c2.5,0,4.6,2.1,4.6,4.6v41.5c0,2.5-2.1,4.6-4.6,4.6H11.2c-2.5,0-4.6-2.1-4.6-4.6V11.2c0-2.5,2.1-4.6,4.6-4.6	H52.8 M52.8,2H11.2C6.1,2,2,6.1,2,11.2v41.5c0,5.1,4.1,9.2,9.2,9.2h41.5c5.1,0,9.2-4.1,9.2-9.2V11.2C62,6.1,57.9,2,52.8,2L52.8,2z	"/>
<path d="M32,37.2c5.2,0,9.4,3.9,9.4,8.8c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4c0-3.3-3-6-6.6-6c-3.6,0-6.6,2.7-6.6,6	c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4C22.6,41.1,26.8,37.2,32,37.2z"/>
<circle cx="22.9" cy="28.7" r="3.9"/>
<circle cx="41.1" cy="28.7" r="3.9"/>
<path d="M27.5,21.9c-0.4,0.6-1.1,0.7-1.7,0.3c-2-1.1-4.4-0.6-6.1,1.3c-0.5,0.6-1.2,0.8-1.7,0.4l0,0c-0.5-0.4-0.4-1.6,0.3-2.5	c2.3-2.6,5.5-3.3,8.3-1.7C27.5,20.2,27.9,21.3,27.5,21.9L27.5,21.9z"/>
<path d="M36.5,21.9c0.4,0.6,1.1,0.7,1.7,0.3c2-1.1,4.4-0.6,6.1,1.3c0.5,0.6,1.2,0.8,1.7,0.4l0,0c0.5-0.4,0.4-1.6-0.3-2.5	c-2.3-2.6-5.5-3.3-8.3-1.7C36.5,20.2,36.1,21.3,36.5,21.9L36.5,21.9z"/>
</svg>
</body>
</html>

SVG Icons: step 6 - Script Codes CSS Codes

body{ background:#2D2E3F;
}
#ico-neutral,
#ico-success,
#ico-failure{ width:10%; height:10%; -webkit-transition: all .2s ease-in-out;
}
#ico-neutral{ fill:#41C2ED; /*blue*/
}
#ico-success{ fill:#99FF66;/*green*/
}
#ico-failure{ fill:#F7696D;/*red*/
}
#ico-neutral:hover,
#ico-success:hover,
#ico-failure:hover{ -webkit-transform: scale(0.5);
}
#ico-failure{ -webkit-animation-name: color-pulse; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; animation-name: color-pulse; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; -moz-animation: none;
}
@-webkit-keyframes color-pulse { 0% { fill:#FF4981; } 100% { opacity:0; }
}
@keyframes color-pulse { 0% { fill:#FF4981; } 100% { opacity:0; }
}
SVG Icons: step 6 - Script Codes
SVG Icons: step 6 - Script Codes
Home Page Home
Developer Benedikte Vanderweeën
Username Benedikte
Uploaded January 21, 2023
Rating 3
Size 2,573 Kb
Views 4,048
Do you need developer help for SVG Icons: step 6?

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!

Benedikte Vanderweeën (Benedikte) Script Codes
Name
Transparent SVG pattern
Illustrio interface
Sun Animation
Drifting Clouds
Pure CSS One Div Weather Animated Icons
Background SVG Gradients
SVG Logo
Europe
Swimming fish
Linear Gradients with SVG
Create amazing love letters 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!