SVG CREAM

Developer
Francois Coron
Size
2,766 Kb
Views
8,096
  1. SVG CREAM Previews
  2. SVG CREAM HTML Codes
  3. SVG CREAM CSS Codes

How do I make an svg cream?

What is a svg cream? How do you make a svg cream? This script and codes were developed by Francois Coron on 08 December 2022, Thursday.

SVG CREAM Previews
IQ Test

SVG CREAM - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG CREAM</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svg-header">	<h1>Svg Cream</h1>
</div>
<div class="cream">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.2 499.9" enable-background="new 0 0 206.2 499.9">	<path class="cream__stick" d="M79 369.9v102.9c0 13.3 12.6 26.1 25.9 26.1h.2c13.3 0 22.9-12.8 22.9-26.1v-102.9h-49z"/>	<path class="cream__body" d="M105 1c-56.3 0-104 45.6-104 101.9v253.20000000000002c0 6.6 7.7 13.8 14.3 13.8h19.7v33.4c0 3.3 2.7 5.9 6 5.9s6-2.6 6-5.9v-9.3c0-1.8 1.2-3.3 3-3.3s3 1.5 3 3.3v18.4c0 4 3.5 7.2 7.5 7.2s7.5-3.2 7.5-7.2v-20.4c0-1.5 1-2.6 2.5-2.6s2.5 1.2 2.5 2.6v7.2c0 4 3 7.2 7 7.2s7-3.2 7-7.2v-29.4h108.1c6.6 0 9.9-7.2 9.9-13.8v-248.7c0-.4.2-3 .2-4.1 0-56.3-44-102.2-100.2-102.2z"/>	<path class="cream__inside-l" d="M92 324.9v-216.4c0-16.4-8.9-27.6-22.3-27.6h-.3c-13.2 0-26.4 11.1-26.4 27.6v216.4h49z"/>	<path class="cream__inside-r" d="M165 324.9v-216.4c0-16.4-8.9-27.6-22.3-27.6h-.3c-13.3 0-26.5 11.2-26.5 27.6v216.4h49.1z"/>	</svg>
</div>
</body>
</html>

SVG CREAM - Script Codes CSS Codes

*,
*::before,
*::after { box-sizing: border-box;
}
.svg-header { text-align: center; padding: 60px 0;
}
.svg-header h1 { text-transform: uppercase; font-family: 'Open Sans'; font-size: 2rem; letter-spacing: .5em; color: #333; font-weight: 500;
}
.svg-header h1::after { content: ""; height: 3px; display: block; margin: 40px auto; width: 90px; background-color: #333;
}
.cream { width: 200px; margin: 60px auto;
}
.cream path { fill: #FFF; stroke-width: 3; stroke: #333; -webkit-animation: offset 2s linear infinite; animation: offset 2s linear infinite;
}
.cream__stick { stroke-dasharray: 400; stroke-dashoffset: 400; -webkit-animation-delay: 1.75s; animation-delay: 1.75s;
}
.cream__body { stroke-dasharray: 1600; stroke-dashoffset: 1600;
}
.cream__inside-l { stroke-dasharray: 900; stroke-dashoffset: 900;
}
.cream__inside-r { stroke-dasharray: 600; stroke-dashoffset: 600; -webkit-animation-delay: 1s; animation-delay: 1s;
}
@-webkit-keyframes offset { to { stroke-dashoffset: 0; }
}
@keyframes offset { to { stroke-dashoffset: 0; }
}
SVG CREAM - Script Codes
SVG CREAM - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded December 08, 2022
Rating 3
Size 2,766 Kb
Views 8,096
Do you need developer help for SVG CREAM?

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!

Francois Coron (francoiscoron) Script Codes
Name
Starter CP
Reveal footer
Starter jade
Close SVG
Responsive Nav
Light card transition on scroll
Hover img
Auto Height textarea
STAR WARS LIGHTSABER
Simple Button Icons
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!