Tạo form login độc đáo bằng react
Bài đăng này đã không được cập nhật trong 4 năm
Bài viết được lấy ý tưởng từ một example trên codepen: https://codepen.io/dsenneff/full/2c3e5bc86b372d5424b00edaf4990173
Example sử dụng thư viện gsap của javasxript kết hợp với svg để làm hình động khi mình input vào form nhìn rất cute.
Nhưng được viết bằng html và js thuần, nên mình sẽ chuyển nó sang react cho vui, có thể sau này sẽ nhúng vào dự án react nào đó thì sẽ rất cool ngầu 
)
Khởi tạo ứng dụng react
Chúng ta sẽ sử dụng react-create-app để khởi tạo ứng dụng, trong bài viết mình sử dụng yarn, bạn cũng có thể sử dụng npm để thay thế nếu muốn
yarn global add create-react-app
Khởi tạo project, tên project mình khởi tạo là login-svg-react
create-react-app login-svg-react
Sau khi cài đặt xong, ta di chuyển vào thư mục project cd login-svg-react
Vào được thư mục project rồi thì khởi chạy ứng dung và code thôi
yarn start
Sau khi chạy trình duyệt sẽ mở ra một trang, mặc định là localhost:3000
Thư viện cần dùng
Example đang sử dụng các thư viện bằng cách nhúng thẳng vào trang web thông qua các thẻ csript. Khi chuyển sang react ta sẽ dùng thư viện đó thông qua trình quản lý gói của javascript là npm nhé.
Các thư viện cần thêm
gsapeasesnode-sass
Cài đặt các thư viện cần thiết
yarn add gsap eases node-sass
Chuyển HTML thuần sang react
Các bạn ở file src/App.js và thay thế bằng nội dung này nhé
import React, { Component } from 'react';
import { TweenMax, Power2, Expo } from "gsap/TweenMax";
import Quad from "eases";
import './App.scss';
class App extends Component {
componentDidMount() {
var emailLabel = document.querySelector('#loginEmailLabel'), email = document.querySelector('#loginEmail'), passwordLabel = document.querySelector('#loginPasswordLabel'), password = document.querySelector('#loginPassword'), showPasswordCheck = document.querySelector('#showPasswordCheck'), showPasswordToggle = document.querySelector('#showPasswordToggle'), mySVG = document.querySelector('.svgContainer'), twoFingers = document.querySelector('.twoFingers'), armL = document.querySelector('.armL'), armR = document.querySelector('.armR'), eyeL = document.querySelector('.eyeL'), eyeR = document.querySelector('.eyeR'), nose = document.querySelector('.nose'), mouth = document.querySelector('.mouth'), mouthBG = document.querySelector('.mouthBG'), mouthSmallBG = document.querySelector('.mouthSmallBG'), mouthMediumBG = document.querySelector('.mouthMediumBG'), mouthLargeBG = document.querySelector('.mouthLargeBG'), mouthMaskPath = document.querySelector('#mouthMaskPath'), mouthOutline = document.querySelector('.mouthOutline'), tooth = document.querySelector('.tooth'), tongue = document.querySelector('.tongue'), chin = document.querySelector('.chin'), face = document.querySelector('.face'), eyebrow = document.querySelector('.eyebrow'), outerEarL = document.querySelector('.earL .outerEar'), outerEarR = document.querySelector('.earR .outerEar'), earHairL = document.querySelector('.earL .earHair'), earHairR = document.querySelector('.earR .earHair'), hair = document.querySelector('.hair'), bodyBG = document.querySelector('.bodyBGnormal'), bodyBGchanged = document.querySelector('.bodyBGchanged');
var activeElement, curEmailIndex, screenCenter, svgCoords, emailCoords, emailScrollMax, chinMin = .5, dFromC, mouthStatus = "small", blinking, eyeScale = 1, eyesCovered = false, showPasswordClicked = false;
var eyeLCoords, eyeRCoords, noseCoords, mouthCoords, eyeLAngle, eyeLX, eyeLY, eyeRAngle, eyeRX, eyeRY, noseAngle, noseX, noseY, mouthAngle, mouthX, mouthY, mouthR, chinX, chinY, chinS, faceX, faceY, faceSkew, eyebrowSkew, outerEarX, outerEarY, hairX, hairS;
function calculateFaceMove(e) {
var
carPos = email.selectionEnd,
div = document.createElement('div'),
span = document.createElement('span'),
copyStyle = getComputedStyle(email),
caretCoords = {}
;
if (carPos === null || carPos === 0) {
// if browser doesn't support 'selectionEnd' property on input[type="email"], use 'value.length' property instead
carPos = email.value.length;
}
[].forEach.call(copyStyle, function (prop) {
div.style[prop] = copyStyle[prop];
});
div.style.position = 'absolute';
document.body.appendChild(div);
div.textContent = email.value.substr(0, carPos);
span.textContent = email.value.substr(carPos) || '.';
div.appendChild(span);
if (email.scrollWidth <= emailScrollMax) {
caretCoords = getPosition(span);
dFromC = screenCenter - (caretCoords.x + emailCoords.x);
eyeLAngle = getAngle(eyeLCoords.x, eyeLCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
eyeRAngle = getAngle(eyeRCoords.x, eyeRCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
noseAngle = getAngle(noseCoords.x, noseCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
mouthAngle = getAngle(mouthCoords.x, mouthCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
} else {
eyeLAngle = getAngle(eyeLCoords.x, eyeLCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25);
eyeRAngle = getAngle(eyeRCoords.x, eyeRCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25);
noseAngle = getAngle(noseCoords.x, noseCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25);
mouthAngle = getAngle(mouthCoords.x, mouthCoords.y, emailCoords.x + emailScrollMax, emailCoords.y + 25);
}
eyeLX = Math.cos(eyeLAngle) * 20;
eyeLY = Math.sin(eyeLAngle) * 10;
eyeRX = Math.cos(eyeRAngle) * 20;
eyeRY = Math.sin(eyeRAngle) * 10;
noseX = Math.cos(noseAngle) * 23;
noseY = Math.sin(noseAngle) * 10;
mouthX = Math.cos(mouthAngle) * 23;
mouthY = Math.sin(mouthAngle) * 10;
mouthR = Math.cos(mouthAngle) * 6;
chinX = mouthX * .8;
chinY = mouthY * .5;
chinS = 1 - ((dFromC * .15) / 100);
if (chinS > 1) {
chinS = 1 - (chinS - 1);
if (chinS < chinMin) {
chinS = chinMin;
}
}
faceX = mouthX * .3;
faceY = mouthY * .4;
faceSkew = Math.cos(mouthAngle) * 5;
eyebrowSkew = Math.cos(mouthAngle) * 25;
outerEarX = Math.cos(mouthAngle) * 4;
outerEarY = Math.cos(mouthAngle) * 5;
hairX = Math.cos(mouthAngle) * 6;
hairS = 1.2;
TweenMax.to(eyeL, 1, { x: -eyeLX, y: -eyeLY, ease: Expo.easeOut });
TweenMax.to(eyeR, 1, { x: -eyeRX, y: -eyeRY, ease: Expo.easeOut });
TweenMax.to(nose, 1, { x: -noseX, y: -noseY, rotation: mouthR, transformOrigin: "center center", ease: Expo.easeOut });
TweenMax.to(mouth, 1, { x: -mouthX, y: -mouthY, rotation: mouthR, transformOrigin: "center center", ease: Expo.easeOut });
TweenMax.to(chin, 1, { x: -chinX, y: -chinY, scaleY: chinS, ease: Expo.easeOut });
TweenMax.to(face, 1, { x: -faceX, y: -faceY, skewX: -faceSkew, transformOrigin: "center top", ease: Expo.easeOut });
TweenMax.to(eyebrow, 1, { x: -faceX, y: -faceY, skewX: -eyebrowSkew, transformOrigin: "center top", ease: Expo.easeOut });
TweenMax.to(outerEarL, 1, { x: outerEarX, y: -outerEarY, ease: Expo.easeOut });
TweenMax.to(outerEarR, 1, { x: outerEarX, y: outerEarY, ease: Expo.easeOut });
TweenMax.to(earHairL, 1, { x: -outerEarX, y: -outerEarY, ease: Expo.easeOut });
TweenMax.to(earHairR, 1, { x: -outerEarX, y: outerEarY, ease: Expo.easeOut });
TweenMax.to(hair, 1, { x: hairX, scaleY: hairS, transformOrigin: "center bottom", ease: Expo.easeOut });
document.body.removeChild(div);
};
function onEmailInput(e) {
calculateFaceMove(e);
var value = email.value;
curEmailIndex = value.length;
// very crude email validation to trigger effects
if (curEmailIndex > 0) {
if (mouthStatus === "small") {
mouthStatus = "medium";
TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, shapeIndex: 8, ease: Expo.easeOut });
TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut });
TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut });
eyeScale = .85;
}
if (value.includes("@")) {
mouthStatus = "large";
TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthLargeBG, ease: Expo.easeOut });
TweenMax.to(tooth, 1, { x: 3, y: -2, ease: Expo.easeOut });
TweenMax.to(tongue, 1, { y: 2, ease: Expo.easeOut });
TweenMax.to([eyeL, eyeR], 1, { scaleX: .65, scaleY: .65, ease: Expo.easeOut, transformOrigin: "center center" });
eyeScale = .65;
} else {
mouthStatus = "medium";
TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, ease: Expo.easeOut });
TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut });
TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut });
eyeScale = .85;
}
} else {
mouthStatus = "small";
TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthSmallBG, shapeIndex: 9, ease: Expo.easeOut });
TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
TweenMax.to(tongue, 1, { y: 0, ease: Expo.easeOut });
TweenMax.to([eyeL, eyeR], 1, { scaleX: 1, scaleY: 1, ease: Expo.easeOut });
eyeScale = 1;
}
}
function onEmailFocus(e) {
activeElement = "email";
e.target.parentElement.classList.add("focusWithText");
//stopBlinking();
//calculateFaceMove();
onEmailInput();
}
function onEmailBlur(e) {
activeElement = null;
setTimeout(function () {
if (activeElement === "email") {
} else {
if (e.target.value === "") {
e.target.parentElement.classList.remove("focusWithText");
}
//startBlinking();
resetFace();
}
}, 100);
}
function onEmailLabelClick(e) {
activeElement = "email";
}
function onPasswordFocus(e) {
activeElement = "password";
if (!eyesCovered) {
coverEyes();
}
}
function onPasswordBlur(e) {
activeElement = null;
setTimeout(function () {
if (activeElement === "toggle" || activeElement === "password") {
} else {
uncoverEyes();
}
}, 100);
}
function onPasswordToggleFocus(e) {
activeElement = "toggle";
if (!eyesCovered) {
coverEyes();
}
}
function onPasswordToggleBlur(e) {
activeElement = null;
if (!showPasswordClicked) {
setTimeout(function () {
if (activeElement === "password" || activeElement === "toggle") {
} else {
uncoverEyes();
}
}, 100);
}
}
function onPasswordToggleMouseDown(e) {
showPasswordClicked = true;
}
function onPasswordToggleMouseUp(e) {
showPasswordClicked = false;
}
function onPasswordToggleChange(e) {
setTimeout(function () {
// if checkbox is checked, show password
if (e.target.checked) {
password.type = "text";
spreadFingers();
// if checkbox is off, hide password
} else {
password.type = "password";
closeFingers();
}
}, 100);
}
function onPasswordToggleClick(e) {
//console.log("click: " + e.target.id);
e.target.focus();
}
function spreadFingers() {
TweenMax.to(twoFingers, .35, { transformOrigin: "bottom left", rotation: 30, x: -9, y: -2, ease: Power2.easeInOut });
}
function closeFingers() {
TweenMax.to(twoFingers, .35, { transformOrigin: "bottom left", rotation: 0, x: 0, y: 0, ease: Power2.easeInOut });
}
function coverEyes() {
TweenMax.killTweensOf([armL, armR]);
TweenMax.set([armL, armR], { visibility: "visible" });
TweenMax.to(armL, .45, { x: -93, y: 10, rotation: 0, ease: Quad.easeOut });
TweenMax.to(armR, .45, { x: -93, y: 10, rotation: 0, ease: Quad.easeOut, delay: .1 });
TweenMax.to(bodyBG, .45, { morphSVG: bodyBGchanged, ease: Quad.easeOut });
eyesCovered = true;
}
function uncoverEyes() {
TweenMax.killTweensOf([armL, armR]);
TweenMax.to(armL, 1.35, { y: 220, ease: Quad.easeOut });
TweenMax.to(armL, 1.35, { rotation: 105, ease: Quad.easeOut, delay: .1 });
TweenMax.to(armR, 1.35, { y: 220, ease: Quad.easeOut });
TweenMax.to(armR, 1.35, {
rotation: -105, ease: Quad.easeOut, delay: .1, onComplete: function () {
TweenMax.set([armL, armR], { visibility: "hidden" });
}
});
TweenMax.to(bodyBG, .45, { morphSVG: bodyBG, ease: Quad.easeOut });
eyesCovered = false;
}
function resetFace() {
TweenMax.to([eyeL, eyeR], 1, { x: 0, y: 0, ease: Expo.easeOut });
TweenMax.to(nose, 1, { x: 0, y: 0, scaleX: 1, scaleY: 1, ease: Expo.easeOut });
TweenMax.to(mouth, 1, { x: 0, y: 0, rotation: 0, ease: Expo.easeOut });
TweenMax.to(chin, 1, { x: 0, y: 0, scaleY: 1, ease: Expo.easeOut });
TweenMax.to([face, eyebrow], 1, { x: 0, y: 0, skewX: 0, ease: Expo.easeOut });
TweenMax.to([outerEarL, outerEarR, earHairL, earHairR, hair], 1, { x: 0, y: 0, scaleY: 1, ease: Expo.easeOut });
}
function startBlinking(delay) {
if (delay) {
delay = getRandomInt(delay);
} else {
delay = 1;
}
blinking = TweenMax.to([eyeL, eyeR], .1, {
delay: delay, scaleY: 0, yoyo: true, repeat: 1, transformOrigin: "center center", onComplete: function () {
startBlinking(12);
}
});
}
function stopBlinking() {
blinking.kill();
blinking = null;
TweenMax.set([eyeL, eyeR], { scaleY: eyeScale });
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function getAngle(x1, y1, x2, y2) {
var angle = Math.atan2(y1 - y2, x1 - x2);
return angle;
}
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName === "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
//console.log("xPos: " + xPos + ", yPos: " + yPos);
return {
x: xPos,
y: yPos
};
}
function isMobileDevice() {
var check = false;
(function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
function initLoginForm() {
// some measurements for the svg's elements
svgCoords = getPosition(mySVG);
emailCoords = getPosition(email);
screenCenter = svgCoords.x + (mySVG.offsetWidth / 2);
eyeLCoords = { x: svgCoords.x + 84, y: svgCoords.y + 76 };
eyeRCoords = { x: svgCoords.x + 113, y: svgCoords.y + 76 };
noseCoords = { x: svgCoords.x + 97, y: svgCoords.y + 81 };
mouthCoords = { x: svgCoords.x + 100, y: svgCoords.y + 100 };
// handle events for email input
email.addEventListener('focus', onEmailFocus);
email.addEventListener('blur', onEmailBlur);
email.addEventListener('input', onEmailInput);
emailLabel.addEventListener('click', onEmailLabelClick);
// handle events for password input
password.addEventListener('focus', onPasswordFocus);
password.addEventListener('blur', onPasswordBlur);
//passwordLabel.addEventListener('click', onPasswordLabelClick);
// handle events for password checkbox
showPasswordCheck.addEventListener('change', onPasswordToggleChange);
showPasswordCheck.addEventListener('focus', onPasswordToggleFocus);
showPasswordCheck.addEventListener('blur', onPasswordToggleBlur);
showPasswordCheck.addEventListener('click', onPasswordToggleClick);
showPasswordToggle.addEventListener('mouseup', onPasswordToggleMouseUp);
showPasswordToggle.addEventListener('mousedown', onPasswordToggleMouseDown);
// move arms to initial positions
TweenMax.set(armL, { x: -93, y: 220, rotation: 105, transformOrigin: "top left" });
TweenMax.set(armR, { x: -93, y: 220, rotation: -105, transformOrigin: "top right" });
// set initial mouth property (fixes positioning bug)
TweenMax.set(mouth, { transformOrigin: "center center" });
// activate blinking
startBlinking(5);
// determine how far email input can go before scrolling occurs
// will be used as the furthest point avatar will look to the right
emailScrollMax = email.scrollWidth;
// check if we're on mobile/tablet, if so then show password initially
if (isMobileDevice()) {
password.type = "text";
showPasswordCheck.checked = true;
TweenMax.set(twoFingers, { transformOrigin: "bottom left", rotation: 30, x: -9, y: -2, ease: Power2.easeInOut });
}
// clear the console
console.clear();
}
initLoginForm();
}
render() {
return (
<div className="App">
<form>
<div className="svgContainer">
<div>
<svg className="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<circle id="armMaskPath" cx="100" cy="100" r="100" />
</defs>
<clipPath id="armMask">
<use xlinkHref="#armMaskPath" overflow="visible" />
</clipPath>
<circle cx="100" cy="100" r="100" fill="#a9ddf3" />
<g className="body">
<path className="bodyBGchanged" style={{ display: 'none' }} fill="#FFFFFF" d="M200,122h-35h-14.9V72c0-27.6-22.4-50-50-50s-50,22.4-50,50v50H35.8H0l0,91h200L200,122z" />
<path className="bodyBGnormal" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoinn="round" fill="#FFFFFF" d="M200,158.5c0-20.2-14.8-36.5-35-36.5h-14.9V72.8c0-27.4-21.7-50.4-49.1-50.8c-28-0.5-50.9,22.1-50.9,50v50 H35.8C16,122,0,138,0,157.8L0,213h200L200,158.5z" />
<path fill="#DDF1FA" d="M100,156.4c-22.9,0-43,11.1-54.1,27.7c15.6,10,34.2,15.9,54.1,15.9s38.5-5.8,54.1-15.9 C143,167.5,122.9,156.4,100,156.4z" />
</g>
<g className="earL">
<g className="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5">
<circle cx="47" cy="83" r="11.5" />
<path d="M46.3 78.9c-2.3 0-4.1 1.9-4.1 4.1 0 2.3 1.9 4.1 4.1 4.1" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g className="earHair">
<rect x="51" y="64" fill="#FFFFFF" width="15" height="35" />
<path d="M53.4 62.8C48.5 67.4 45 72.2 42.8 77c3.4-.1 6.8-.1 10.1.1-4 3.7-6.8 7.6-8.2 11.6 2.1 0 4.2 0 6.3.2-2.6 4.1-3.8 8.3-3.7 12.5 1.2-.7 3.4-1.4 5.2-1.9" fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</g>
<g className="earR">
<g className="outerEar">
<circle fill="#DDF1FA" stroke="#3A5E77" stroke-width="2.5" cx="153" cy="83" r="11.5" />
<path fill="#DDF1FA" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M153.7,78.9 c2.3,0,4.1,1.9,4.1,4.1c0,2.3-1.9,4.1-4.1,4.1" />
</g>
<g className="earHair">
<rect x="134" y="64" fill="#FFFFFF" width="15" height="35" />
<path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M146.6,62.8 c4.9,4.6,8.4,9.4,10.6,14.2c-3.4-0.1-6.8-0.1-10.1,0.1c4,3.7,6.8,7.6,8.2,11.6c-2.1,0-4.2,0-6.3,0.2c2.6,4.1,3.8,8.3,3.7,12.5 c-1.2-0.7-3.4-1.4-5.2-1.9" />
</g>
</g>
<path className="chin" d="M84.1 121.6c2.7 2.9 6.1 5.4 9.8 7.5l.9-4.5c2.9 2.5 6.3 4.8 10.2 6.5 0-1.9-.1-3.9-.2-5.8 3 1.2 6.2 2 9.7 2.5-.3-2.1-.7-4.1-1.2-6.1" fill="none" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
<path className="face" fill="#DDF1FA" d="M134.5,46v35.5c0,21.815-15.446,39.5-34.5,39.5s-34.5-17.685-34.5-39.5V46" />
<path className="hair" fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M81.457,27.929 c1.755-4.084,5.51-8.262,11.253-11.77c0.979,2.565,1.883,5.14,2.712,7.723c3.162-4.265,8.626-8.27,16.272-11.235 c-0.737,3.293-1.588,6.573-2.554,9.837c4.857-2.116,11.049-3.64,18.428-4.156c-2.403,3.23-5.021,6.391-7.852,9.474" />
<g className="eyebrow">
<path fill="#FFFFFF" d="M138.142,55.064c-4.93,1.259-9.874,2.118-14.787,2.599c-0.336,3.341-0.776,6.689-1.322,10.037 c-4.569-1.465-8.909-3.222-12.996-5.226c-0.98,3.075-2.07,6.137-3.267,9.179c-5.514-3.067-10.559-6.545-15.097-10.329 c-1.806,2.889-3.745,5.73-5.816,8.515c-7.916-4.124-15.053-9.114-21.296-14.738l1.107-11.768h73.475V55.064z" />
<path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M63.56,55.102 c6.243,5.624,13.38,10.614,21.296,14.738c2.071-2.785,4.01-5.626,5.816-8.515c4.537,3.785,9.583,7.263,15.097,10.329 c1.197-3.043,2.287-6.104,3.267-9.179c4.087,2.004,8.427,3.761,12.996,5.226c0.545-3.348,0.986-6.696,1.322-10.037 c4.913-0.481,9.857-1.34,14.787-2.599" />
</g>
<g className="eyeL">
<circle cx="85.5" cy="78.5" r="3.5" fill="#3a5e77" />
<circle cx="84" cy="76" r="1" fill="#fff" />
</g>
<g className="eyeR">
<circle cx="114.5" cy="78.5" r="3.5" fill="#3a5e77" />
<circle cx="113" cy="76" r="1" fill="#fff" />
</g>
<g className="mouth">
<path className="mouthBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z" />
<path style={{ display: 'none' }} className="mouthSmallBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z" />
<path style={{ display: 'none' }} className="mouthMediumBG" d="M95,104.2c-4.5,0-8.2-3.7-8.2-8.2v-2c0-1.2,1-2.2,2.2-2.2h22c1.2,0,2.2,1,2.2,2.2v2 c0,4.5-3.7,8.2-8.2,8.2H95z" />
<path style={{ display: 'none' }} className="mouthLargeBG" d="M100 110.2c-9 0-16.2-7.3-16.2-16.2 0-2.3 1.9-4.2 4.2-4.2h24c2.3 0 4.2 1.9 4.2 4.2 0 9-7.2 16.2-16.2 16.2z" fill="#617e92" stroke="#3a5e77" stroke-linejoin="round" stroke-width="2.5" />
<defs>
<path id="mouthMaskPath" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z" />
</defs>
<clipPath id="mouthMask">
<use xlinkHref="#mouthMaskPath" overflow="visible" />
</clipPath>
<g clip-path="url(#mouthMask)">
<g className="tongue">
<circle cx="100" cy="107" r="8" fill="#cc4a6c" />
<ellipse className="tongueHighlight" cx="100" cy="100.5" rx="3" ry="1.5" opacity=".1" fill="#fff" />
</g>
</g>
<path clip-path="url(#mouthMask)" className="tooth" style={{ fill: '#FFFFFF' }} d="M106,97h-4c-1.1,0-2-0.9-2-2v-2h8v2C108,96.1,107.1,97,106,97z" />
<path className="mouthOutline" fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linejoin="round" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z" />
</g>
<path className="nose" d="M97.7 79.9h4.7c1.9 0 3 2.2 1.9 3.7l-2.3 3.3c-.9 1.3-2.9 1.3-3.8 0l-2.3-3.3c-1.3-1.6-.2-3.7 1.8-3.7z" fill="#3a5e77" />
<g className="arms" clip-path="url(#armMask)">
<g className="armL" style={{ visibility: 'hidden' }}>
<polygon fill="#DDF1FA" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="121.3,98.4 111,59.7 149.8,49.3 169.8,85.4" />
<path fill="#DDF1FA" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M134.4,53.5l19.3-5.2c2.7-0.7,5.4,0.9,6.1,3.5v0c0.7,2.7-0.9,5.4-3.5,6.1l-10.3,2.8" />
<path fill="#DDF1FA" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M150.9,59.4l26-7c2.7-0.7,5.4,0.9,6.1,3.5v0c0.7,2.7-0.9,5.4-3.5,6.1l-21.3,5.7" />
<g className="twoFingers">
<path fill="#DDF1FA" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M158.3,67.8l23.1-6.2c2.7-0.7,5.4,0.9,6.1,3.5v0c0.7,2.7-0.9,5.4-3.5,6.1l-23.1,6.2" />
<path fill="#A9DDF3" d="M180.1,65l2.2-0.6c1.1-0.3,2.2,0.3,2.4,1.4v0c0.3,1.1-0.3,2.2-1.4,2.4l-2.2,0.6L180.1,65z" />
<path fill="#DDF1FA" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M160.8,77.5l19.4-5.2c2.7-0.7,5.4,0.9,6.1,3.5v0c0.7,2.7-0.9,5.4-3.5,6.1l-18.3,4.9" />
<path fill="#A9DDF3" d="M178.8,75.7l2.2-0.6c1.1-0.3,2.2,0.3,2.4,1.4v0c0.3,1.1-0.3,2.2-1.4,2.4l-2.2,0.6L178.8,75.7z" />
</g>
<path fill="#A9DDF3" d="M175.5,55.9l2.2-0.6c1.1-0.3,2.2,0.3,2.4,1.4v0c0.3,1.1-0.3,2.2-1.4,2.4l-2.2,0.6L175.5,55.9z" />
<path fill="#A9DDF3" d="M152.1,50.4l2.2-0.6c1.1-0.3,2.2,0.3,2.4,1.4v0c0.3,1.1-0.3,2.2-1.4,2.4l-2.2,0.6L152.1,50.4z" />
<path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M123.5,97.8 c-41.4,14.9-84.1,30.7-108.2,35.5L1.2,81c33.5-9.9,71.9-16.5,111.9-21.8" />
<path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M108.5,60.4 c7.7-5.3,14.3-8.4,22.8-13.2c-2.4,5.3-4.7,10.3-6.7,15.1c4.3,0.3,8.4,0.7,12.3,1.3c-4.2,5-8.1,9.6-11.5,13.9 c3.1,1.1,6,2.4,8.7,3.8c-1.4,2.9-2.7,5.8-3.9,8.5c2.5,3.5,4.6,7.2,6.3,11c-4.9-0.8-9-0.7-16.2-2.7" />
<path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M94.5,103.8 c-0.6,4-3.8,8.9-9.4,14.7c-2.6-1.8-5-3.7-7.2-5.7c-2.5,4.1-6.6,8.8-12.2,14c-1.9-2.2-3.4-4.5-4.5-6.9c-4.4,3.3-9.5,6.9-15.4,10.8 c-0.2-3.4,0.1-7.1,1.1-10.9" />
<path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M97.5,63.9 c-1.7-2.4-5.9-4.1-12.4-5.2c-0.9,2.2-1.8,4.3-2.5,6.5c-3.8-1.8-9.4-3.1-17-3.8c0.5,2.3,1.2,4.5,1.9,6.8c-5-0.6-11.2-0.9-18.4-1 c2,2.9,0.9,3.5,3.9,6.2" />
</g>
<g className="armR" style={{ visibility: 'hidden' }}>
<path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M265.4 97.3l10.4-38.6-38.9-10.5-20 36.1z" />
<path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5" d="M252.4 52.4L233 47.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l10.3 2.8M226 76.4l-19.4-5.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l18.3 4.9M228.4 66.7l-23.1-6.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l23.1 6.2M235.8 58.3l-26-7c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l21.3 5.7" />
<path fill="#a9ddf3" d="M207.9 74.7l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM206.7 64l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM211.2 54.8l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM234.6 49.4l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8z" />
<path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M263.3 96.7c41.4 14.9 84.1 30.7 108.2 35.5l14-52.3C352 70 313.6 63.5 273.6 58.1" />
<path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M278.2 59.3l-18.6-10 2.5 11.9-10.7 6.5 9.9 8.7-13.9 6.4 9.1 5.9-13.2 9.2 23.1-.9M284.5 100.1c-.4 4 1.8 8.9 6.7 14.8 3.5-1.8 6.7-3.6 9.7-5.5 1.8 4.2 5.1 8.9 10.1 14.1 2.7-2.1 5.1-4.4 7.1-6.8 4.1 3.4 9 7 14.7 11 1.2-3.4 1.8-7 1.7-10.9M314 66.7s5.4-5.7 12.6-7.4c1.7 2.9 3.3 5.7 4.9 8.6 3.8-2.5 9.8-4.4 18.2-5.7.1 3.1.1 6.1 0 9.2 5.5-1 12.5-1.6 20.8-1.9-1.4 3.9-2.5 8.4-2.5 8.4" />
</g>
</g>
</svg>
</div>
</div>
<div className="inputGroup inputGroup1">
<label for="loginEmail" id="loginEmailLabel">Email</label>
<input type="email" id="loginEmail" maxlength="254" />
<p className="helper helper1">email@domain.com</p>
</div>
<div className="inputGroup inputGroup2">
<label for="loginPassword" id="loginPasswordLabel">Password</label>
<input type="password" id="loginPassword" />
<label id="showPasswordToggle" for="showPasswordCheck">Show
<input id="showPasswordCheck" type="checkbox" />
<div className="indicator"></div>
</label>
</div>
<div className="inputGroup inputGroup3">
<button id="login">Log in</button>
</div>
</form>
</div>
);
}
}
export default App;
Tiếp theo thêm file scss, bạn tạo mới file src/App.scss và thêm vào nội dung sau
/* colors */
$darkBlue: #217093;
$medBlue: #4eb8dd;
$lightBlue: #ddf1fa;
$inputBG: #f3fafd;
html {width: 100%; height: 100%;}
body {
background-color: #eff3f4; position: relative; width: 100%; height: 100%;
font-size: 16px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400;
-webkit-font-smoothing: antialiased;
}
form {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
display: block; width: 100%; max-width: 400px; background-color: #FFF;
margin: 0; padding: 2.25em; box-sizing: border-box; border: solid 1px #DDD; border-radius: .5em;
font-family: 'Source Sans Pro', sans-serif;
.svgContainer {
position: relative; width: 200px; height: 200px; margin: 0 auto 1em;
border-radius: 50%;
pointer-events: none;
div {
position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 50%;
padding-bottom: 100%;
}
.mySVG {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
pointer-events: none;
}
&:after {
content: ""; position: absolute; top: 0; left: 0; z-index: 10;
width: inherit; height: inherit; box-sizing: border-box;
border: solid 2.5px $darkBlue; border-radius: 50%;
}
}
.inputGroup {
margin: 0 0 2em; padding: 0; position: relative;
&:last-of-type {
margin-bottom: 0;
}
}
label {
margin: 0 0 12px; display: block;
font-size: 1.25em; color: #217093; font-weight: 700; font-family: inherit;
}
input[type='email'], input[type="text"], input[type="number"], input[type="url"], input[type="search"], input[type="password"] {
display: block; margin: 0; padding: 0 1em 0; padding: .875em 1em 0;
background-color: $inputBG; border: solid 2px $darkBlue; border-radius: 4px; -webkit-appearance: none;
box-sizing: border-box;
width: 100%; height: 65px;
font-size: 1.55em; color: #353538; font-weight: 600; font-family: inherit;
transition: box-shadow .2s linear, border-color .25s ease-out;
&:focus {
outline: none;
box-shadow: 0px 2px 10px rgba(0,0,0,.1);
border: solid 2px $medBlue;
}
}
button {
display: block; margin: 0; padding: .65em 1em 1em;
background-color: $medBlue; border: none; border-radius: 4px;
box-sizing: border-box; box-shadow: none;
width: 100%; height: 65px;
font-size: 1.55em; color: #FFF; font-weight: 600; font-family: inherit;
transition: background-color .2s ease-out;
&:hover, &:active {
background-color: $darkBlue;
}
}
.inputGroup1 {
.helper {
position: absolute; z-index: 1;
font-family: inherit;
}
.helper1 {
top: 0; left: 0;
transform: translate(1em, 2.2em) scale(1); transform-origin: 0 0;
color: $darkBlue; font-size: 1.55em; font-weight: 400; opacity: .65;
pointer-events: none;
transition: transform .2s ease-out, opacity .2s linear;
}
&.focusWithText .helper {
transform: translate(1em, 1.55em) scale(.6); opacity: 1;
}
}
.inputGroup2 {
input[type="password"] {
padding: .4em 1em .5em;
}
input[type="text"] {
padding: .025em 1em 0;
}
#showPasswordToggle {
display: block; padding: 0 0 0 1.45em;
position: absolute; top: .25em; right: 0;
font-size: 1em;
input {
position: absolute; z-index: -1;
opacity: 0;
}
.indicator {
position: absolute; top: 0; left: 0;
height: .85em; width: .85em;
background-color: $inputBG; border: solid 2px $darkBlue; border-radius: 3px;
&:after {
content: "";
position: absolute; left: .25em; top: .025em;
width: .2em; height: .5em;
border: solid $darkBlue; border-width: 0 3px 3px 0;
transform: rotate(45deg); visibility: hidden;
}
}
input:checked ~ .indicator {
&:after {visibility: visible;}
}
input:focus ~ .indicator, input:hover ~ .indicator {
border-color: $medBlue;
}
input:disabled ~ .indicator {
opacity: .5;
&:after {visibility: hidden;}
}
}
}
}
p {
margin: 0px;
}
Vậy là xong, bạn quay lại trang web localhost:300 để trải nghiệm nhé
Bạn cũng có thể tham khảo link github pages của mình: https://ththth0303.github.io/login-svg-react/
Tham khảo
Link example gốc: https://codepen.io/dsenneff/full/2c3e5bc86b372d5424b00edaf4990173
Link github sau khi chuyển sang react: https://github.com/ththth0303/login-svg-react.git
All rights reserved
