SVG Stroke Drawing Effect on Focus

Developer
Andy Merskin
Size
2,399 Kb
Views
34,408
  1. SVG Stroke Drawing Effect on Focus Previews
  2. SVG Stroke Drawing Effect on Focus HTML Codes
  3. SVG Stroke Drawing Effect on Focus CSS Codes

How do I make an svg stroke drawing effect on focus?

What is a svg stroke drawing effect on focus? How do you make a svg stroke drawing effect on focus? This script and codes were developed by Andy Merskin on 10 August 2022, Wednesday.

SVG Stroke Drawing Effect on Focus Previews
IQ Test

SVG Stroke Drawing Effect on Focus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Stroke Drawing Effect on Focus</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper" tabindex="0"> <svg width="640" height="320"> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> </filter> <rect class="shape shape-fill"></rect> <rect class="shape" filter="url(#blur)"></rect> <div class="text">Click Me</div> </svg>
</div>
</body>
</html>

SVG Stroke Drawing Effect on Focus - Script Codes CSS Codes

html, body { background-color: #222; text-align: center; height: 100%;
}
.wrapper { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0 auto; width: 640px; outline: none;
}
.wrapper svg { display: block;
}
.shape { width: 636px; height: 316px; -webkit-transform: translate(2.5px, 2.5px); transform: translate(2.5px, 2.5px); fill: transparent; stroke: #ccc; stroke-width: 1px; stroke-dasharray: 1920; stroke-dashoffset: 1920; -webkit-transition: stroke-dashoffset 0s, fill 0.15s; transition: stroke-dashoffset 0s, fill 0.15s;
}
.wrapper:focus { background-color: #242424;
}
.wrapper:focus .shape { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 1s, fill 0.3s 1s; transition: stroke-dashoffset 1s, fill 0.3s 1s;
}
.wrapper:focus .shape-fill { fill: #ddd;
}
.wrapper:focus .text { color: #333; -webkit-transition: color 0.3s 1s; transition: color 0.3s 1s;
}
.text { width: 100%; position: absolute; top: 0; line-height: 320px; color: #fff; -webkit-transition: color 0.3s; transition: color 0.3s;
}
SVG Stroke Drawing Effect on Focus - Script Codes
SVG Stroke Drawing Effect on Focus - Script Codes
Home Page Home
Developer Andy Merskin
Username andymerskin
Uploaded August 10, 2022
Rating 3
Size 2,399 Kb
Views 34,408
Do you need developer help for SVG Stroke Drawing Effect on Focus?

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!

Andy Merskin (andymerskin) Script Codes
Name
Vue.js Recipe - Slideout Menu
Vue.js Intro Demo
Vue List Transitions - Bug Test
Vue.js Starter
Text Antialiasing Differences
SASS Easings
Table Row Peek
Wires Loading Animation
GSS Transitions
Animated Dropdowns with scaleY
Create amazing video scripts 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!