Origami Penguin
How do I make an origami penguin?
A special pen for a dear friend who will be moving soon. Two of her favorite things: purple and penguins.. What is a origami penguin? How do you make a origami penguin? This script and codes were developed by Chris Ota on 15 September 2022, Thursday.
Origami Penguin Previews
Origami Penguin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Origami Penguin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { box-sizing: border-box;
}
html { width: 100%; height: 100%; background: #9862a9;
}
body { font-size: 250%; width: 8em; height: 8em; border-radius: 100%; background: #4bb09e; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
}
div { height: 0; width: 0; position: relative; margin-left: 2.2em;
}
div:before, div:after { content: ''; display: block; position: absolute;
}
.b { margin-top: 1.7em; border-style: solid; border-width: 0 0.9em 1.05em 1.35em; border-color: transparent transparent #1e1e1b transparent; transform: rotate(-28deg); z-index: 3; box-shadow: -0.2em 0.4em 0.3em -0.4em transparent; width: 0;
}
.b:before { border-style: solid; border-width: 0.25em 0.4em 0 0.1em; border-color: #ecaa2c transparent transparent transparent; top: 0.8em; left: 0.8em; transform: rotate(28deg);
}
.b:after { border-style: solid; border-width: 0 0.4em 0.44em 1em; border-color: transparent transparent #292925 transparent; transform: rotate(50deg); left: -0.1em; top: 0.18em;
}
.y { top: -0.35em; left: 1.75em; z-index: 0; border-bottom: 1.1em solid #fff; border-right: 1.1em solid transparent; width: 1em; box-shadow: -1.45em 0 0 -0.4em #292925, -1.4em 0.12em 0 -0.4em #292925, -1.34em 0.22em 0 -0.4em #292925, -1.38em 0.6em 0 -0.25em #292925, -1.25em 1.1em 0 -0.2em #292925, -1em 0 0 0 #fff, -0.3em 1em 0 0.3em #fff, -0.3em 1.8em 0 0.3em #fff;
}
.y:before { bottom: -3.5em; left: 0.1em; border-style: solid; border-width: 0 0.4em 0.3em 0.7em; border-color: transparent transparent #ecaa2c transparent;
}
.y:after { bottom: -3.5em; left: -0.7em; border-top: 0.3em solid #fff; border-right: 0.7em solid transparent; width: 1.8em;
}
.e { z-index: 2; width: 0.6em; transform: skew(-20deg) rotate(-31deg); left: 1.35em; top: -1.35em; border-left: 0.3em solid #292925; border-top: 1.4em solid transparent; border-bottom: 1.75em solid transparent; box-shadow: -0.6em 0 0 #292925;
}
.e:before { border-style: solid; border-width: 0.5em 0.3em 1.5em; border-color: transparent #aaa transparent transparent; transform: skew(20deg) rotate(29deg); left: -0.75em; top: -0.2em;
}
.e:after { transform: skew(20deg) rotate(18deg); border-style: solid; border-width: 1em 0 0.55em 0.4em; border-color: transparent transparent transparent #1e1e1b; top: 0.3em; left: -0.34em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='b'></div>
<div class='y'></div>
<div class='e'></div> <script src="js/index.js"></script>
</body>
</html>Origami Penguin - Script Codes CSS Codes
*, *:before, *:after { box-sizing: border-box;
}
html { width: 100%; height: 100%; background: #9862a9;
}
body { font-size: 250%; width: 8em; height: 8em; border-radius: 100%; background: #4bb09e; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
}
div { height: 0; width: 0; position: relative; margin-left: 2.2em;
}
div:before, div:after { content: ''; display: block; position: absolute;
}
.b { margin-top: 1.7em; border-style: solid; border-width: 0 0.9em 1.05em 1.35em; border-color: transparent transparent #1e1e1b transparent; transform: rotate(-28deg); z-index: 3; box-shadow: -0.2em 0.4em 0.3em -0.4em transparent; width: 0;
}
.b:before { border-style: solid; border-width: 0.25em 0.4em 0 0.1em; border-color: #ecaa2c transparent transparent transparent; top: 0.8em; left: 0.8em; transform: rotate(28deg);
}
.b:after { border-style: solid; border-width: 0 0.4em 0.44em 1em; border-color: transparent transparent #292925 transparent; transform: rotate(50deg); left: -0.1em; top: 0.18em;
}
.y { top: -0.35em; left: 1.75em; z-index: 0; border-bottom: 1.1em solid #fff; border-right: 1.1em solid transparent; width: 1em; box-shadow: -1.45em 0 0 -0.4em #292925, -1.4em 0.12em 0 -0.4em #292925, -1.34em 0.22em 0 -0.4em #292925, -1.38em 0.6em 0 -0.25em #292925, -1.25em 1.1em 0 -0.2em #292925, -1em 0 0 0 #fff, -0.3em 1em 0 0.3em #fff, -0.3em 1.8em 0 0.3em #fff;
}
.y:before { bottom: -3.5em; left: 0.1em; border-style: solid; border-width: 0 0.4em 0.3em 0.7em; border-color: transparent transparent #ecaa2c transparent;
}
.y:after { bottom: -3.5em; left: -0.7em; border-top: 0.3em solid #fff; border-right: 0.7em solid transparent; width: 1.8em;
}
.e { z-index: 2; width: 0.6em; transform: skew(-20deg) rotate(-31deg); left: 1.35em; top: -1.35em; border-left: 0.3em solid #292925; border-top: 1.4em solid transparent; border-bottom: 1.75em solid transparent; box-shadow: -0.6em 0 0 #292925;
}
.e:before { border-style: solid; border-width: 0.5em 0.3em 1.5em; border-color: transparent #aaa transparent transparent; transform: skew(20deg) rotate(29deg); left: -0.75em; top: -0.2em;
}
.e:after { transform: skew(20deg) rotate(18deg); border-style: solid; border-width: 1em 0 0.55em 0.4em; border-color: transparent transparent transparent #1e1e1b; top: 0.3em; left: -0.34em;
}
Origami Penguin - Script Codes JS Codes
// Origami penguin. Best viewed in Chrome.
| Developer | Chris Ota |
| Username | chrisota |
| Uploaded | September 15, 2022 |
| Rating | 4.5 |
| Size | 4,204 Kb |
| Views | 24,288 |
Do you need developer help for Origami Penguin?
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 Ota (chrisota) Script Codes
| Name | Size |
| Navigation Experiment | 4,547 Kb |
| Lego Man | 5,277 Kb |
| For Fun | 3,087 Kb |
| Pure HTML and CSS Accordion | 3,485 Kb |
| Sticky Nav Bar | 5,134 Kb |
| Responsive Devices | 5,519 Kb |
| Collapsable Menu | 4,335 Kb |
| Vertical Progress Navigation | 4,767 Kb |
| Random Wrist Watch | 7,665 Kb |
| Single HTML Element Icons | 8,967 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Midterm dry run | Jds317 | 1,649 Kb |
| Planet Awesome | Bartuc | 3,554 Kb |
| Box Shadow Effects | Retrofuturistic | 2,143 Kb |
| Pictos font library from CodePen | Jstam | 3,790 Kb |
| Fullscreen audio play button | 72 | 2,148 Kb |
| Rain Landing in a Pond | Edball | 3,009 Kb |
| Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
| Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
| Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
| Vertically rotating text with CSS | Nopr | 2,141 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!