Paparazzi Drone

Developer
Tobi Weinstock
Size
2,608 Kb
Views
22,264
  1. Paparazzi Drone Previews
  2. Paparazzi Drone HTML Codes
  3. Paparazzi Drone CSS Codes

How do I make an paparazzi drone?

In constant pursuit of trying to understand the wondrous ways of SVGs...and CSS3 animations too!. What is a paparazzi drone? How do you make a paparazzi drone? This script and codes were developed by Tobi Weinstock on 02 September 2022, Friday.

Paparazzi Drone Previews
IQ Test

Paparazzi Drone - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Paparazzi Drone</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="drone-container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300" height="130" viewBox="160 200 480 140" enable-background="new -102.833 -102.889 341.333 300.667" xml:space="preserve"> <g> <path fill="#010101" d="M577.6,233.28c0-1.44-1.439-2.88-2.88-2.88c-1.439,0-2.88,1.44-2.88,2.88v3.36h5.76V233.28z"></path> <path fill="#010101" d="M578.08,271.2v-15.84c-0.96,0-1.44,0-2.4,0s-2.399,0-3.359,0v15.36c-2.4-0.48-3.84-0.48-3.84-0.48H463.84 l-11.52-20.64c-0.96-1.44-3.36-2.88-5.28-2.88h-28.32c-5.279-4.8-11.52-8.16-18.72-8.16s-13.92,3.36-18.72,8.16h-28.32 c-1.92,0-4.32,1.44-5.28,2.88l-11.52,20.64H232c0,0-1.44,0-3.84,0.48v-15.36c-1.44,0-2.4,0-3.84,0c-0.48,0-1.44,0-2.4,0v16.32 c-7.68,1.44-16.8,4.32-16.8,10.08c0,10.08,6.24,27.84,15.36,27.84s11.04-4.8,11.04-4.8l11.04-25.92c0,0,49.44,0,108.96,0 l8.16,23.521c-7.2,7.68-15.84,19.68-15.84,31.68c0,22.08,3.84,28.8,3.84,28.8s3.84,9.601,4.32-1.439s-3.36-10.561-3.36-28.32 c0-9.12,7.2-19.2,13.92-26.88h74.4c6.72,7.68,13.92,17.76,13.92,26.88c0,17.28-3.84,16.8-3.359,28.32 c0.479,11.52,4.319,1.439,4.319,1.439s3.84-6.72,3.84-28.8c0-12-8.159-23.521-15.84-31.68L448,278.88c59.521,0,108.96,0,108.96,0 L568,304.8c0,0,1.44,4.8,11.04,4.8c9.601,0,15.36-18.24,15.36-27.84C594.4,275.52,585.28,272.64,578.08,271.2z"></path> <path fill="#010101" d="M228.16,233.28c0-1.44-1.44-2.88-2.88-2.88c-1.44,0-2.88,1.44-2.88,2.88v2.88h5.76V233.28z"></path> </g> </svg> <svg class="blade bladeLeft" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="8" width="75" viewBox="0 0 75 8" enable-background="new 0 0 75 8" xml:space="preserve"> <rect height="8px" width="75px" ry="8px"></rect> </svg> <svg class="blade bladeRight" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="8" width="75" viewBox="0 0 75 8" enable-background="new 0 0 75 8" xml:space="preserve"> <rect height="8px" width="75px" ry="8px"></rect> </svg> <div class="camera-container"> <svg class="camera" height="40px" width="60px" xmlns="http://www.w3.org/2000/svg"> <rect x="22" y="1" rx="2" height="5" width="20px"></rect> <rect x="0" y="5" rx="2" height="35" width="60px"></rect> <circle cx="33" cy="24" r="9" stroke="#fff" stroke-width="4" fill="none" /> </svg> <svg class="flash" height="5" width="5"> <rect height="5" width="5"></rect> </svg> </div> </div>
</body>
</html>

Paparazzi Drone - Script Codes CSS Codes

 .drone-container { position: relative; } .camera-container { position: absolute; width: 60px; top: 110px; left: 120px; } .flash { position: absolute; bottom: 30px; left: 5px; animation-name: flash; animation-duration: 0.5ms; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; } .blade { position: absolute; top: 46px; animation-duration: 0.2s; animation-name: spin; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; } .bladeLeft { left: 5px; } .bladeRight { left: 224px; } @keyframes spin { from { transform:rotateY(0deg); } to { transform:rotateY(-360deg); } } @keyframes flash { 0% { fill: #fff; opacity:1; } 11% { fill: #fff; } 22% { fill: #fff; } 55% { fill: yellow; } 77% { fill: yellow; } 100% { fill: #fff; } }
Paparazzi Drone - Script Codes
Paparazzi Drone - Script Codes
Home Page Home
Developer Tobi Weinstock
Username tvweinstock
Uploaded September 02, 2022
Rating 3
Size 2,608 Kb
Views 22,264
Do you need developer help for Paparazzi Drone?

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!

Tobi Weinstock (tvweinstock) Script Codes
Name
Keep Ya Head Up
Lips icon
Paris Weather Widget
Country Code Select
French Words
Flexbox World Clock
Halloween Tooltips
React Accordion UI Component
Love for Paris
Game card
Create amazing captions 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!