CityPlanner SVG POI bubble

Developer
SNÖGRAFX
Size
2,884 Kb
Views
30,360
  1. CityPlanner SVG POI bubble Previews
  2. CityPlanner SVG POI bubble HTML Codes
  3. CityPlanner SVG POI bubble CSS Codes

How do I make an cityplanner svg poi bubble?

What is a cityplanner svg poi bubble? How do you make a cityplanner svg poi bubble? This script and codes were developed by SNÖGRAFX on 26 August 2022, Friday.

CityPlanner SVG POI bubble Previews
IQ Test

CityPlanner SVG POI bubble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CityPlanner SVG POI bubble</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> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="256px" height="256px" version="1.1"
viewBox="0 0 25600 25600"
xmlns:xlink="http://www.w3.org/1999/xlink"> <style> #poi:hover { cursor: pointer; } #bubble { fill: white; fill-opacity: 0.75; stroke: #7e3952; stroke-width: 1600px; stroke-linejoin: miter; } #poi:hover #bubble, #poi:hover #icon { fill-opacity: 1; } #icon { fill: black; fill-opacity: 0.75; fill-rule: nonzero; } </style> <g id="poi"> <path id="bubble" d="M17005 1683l-8410 0c-1346,0 -2570,551 -3458,1439 -888,888 -1439,2112 -1439,3458l0 7529c0,1266 486,2423 1281,3294 803,881 1920,1471 3165,1586l412 38 203 354 1684 2938 1670 -2913 229 -399 458 0 4205 0c1346,0 2570,-552 3458,-1439 888,-888 1439,-2113 1439,-3459l0 -7529c0,-1346 -551,-2570 -1439,-3458 -888,-888 -2112,-1439 -3458,-1439z" /> <path id="icon" d="M12800 7277c-1695,0 -3068,1373 -3068,3068 0,1694 1373,3068 3068,3068 1695,0 3068,-1374 3068,-3068 0,-1695 -1373,-3068 -3068,-3068zm-3983 5807l848 -489c181,-105 244,-339 139,-520l0 0c-105,-182 -339,-244 -520,-140l-848 490c-181,104 -244,338 -139,520l0 0c104,181 338,244 520,139zm7499 -4329l848 -490c181,-105 244,-339 139,-520l0 0c-104,-182 -338,-244 -520,-140l-848 490c-181,105 -244,339 -139,520l0 0c105,182 339,244 520,140zm-5596 5954l490 -848c104,-182 42,-415 -140,-520l0 0c-181,-105 -415,-42 -520,139l-489 848c-105,181 -42,415 139,520l0 0c181,105 415,42 520,-139zm4330 -7499l489 -848c105,-182 42,-416 -139,-520l0 0c-181,-105 -415,-43 -520,139l-490 848c-104,181 -42,415 140,520l0 0c181,105 415,42 520,-139zm-1869 7954l0 -979c0,-210 -171,-381 -381,-381l0 0c-210,0 -381,171 -381,381l0 979c0,210 171,381 381,381l0 0c210,0 381,-171 381,-381zm0 -8659l0 -979c0,-210 -171,-381 -381,-381l0 0c-210,0 -381,171 -381,381l0 979c0,209 171,380 381,380l0 0c210,0 381,-171 381,-380zm2358 7823l-489 -848c-105,-181 -339,-244 -520,-139l0 0c-182,105 -244,338 -140,520l490 848c105,181 339,244 520,139l0 0c181,-105 244,-339 139,-520zm-4329 -7499l-490 -848c-105,-182 -339,-244 -520,-139l0 0c-181,104 -244,338 -139,520l489 848c105,181 339,244 520,139l0 0c182,-105 244,-339 140,-520zm5954 5596l-848 -490c-181,-105 -415,-42 -520,140l0 0c-105,181 -42,415 139,520l848 489c182,105 416,42 520,-139l0 0c105,-182 42,-416 -139,-520zm-7499 -4330l-848 -490c-182,-104 -416,-42 -520,140l0 0c-105,181 -42,415 139,520l848 489c181,105 415,43 520,-139l0 0c105,-181 42,-415 -139,-520zm7954 1869l-979 0c-209,0 -381,171 -381,381 0,209 172,381 381,381l979 0c210,0 381,-172 381,-381 0,-210 -171,-381 -381,-381zm-1360 381l0 0zm1741 0l0 0zm-9040 -381l-979 0c-210,0 -381,171 -381,381 0,209 171,381 381,381l979 0c209,0 381,-172 381,-381 0,-210 -172,-381 -381,-381zm-1360 381l0 0zm1741 0l0 0z" /> </g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CityPlanner SVG POI bubble - Script Codes CSS Codes

body { background: steelblue; height: 100%; width: 100%; position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
CityPlanner SVG POI bubble - Script Codes
CityPlanner SVG POI bubble - Script Codes
Home Page Home
Developer SNÖGRAFX
Username snografx
Uploaded August 26, 2022
Rating 3
Size 2,884 Kb
Views 30,360
Do you need developer help for CityPlanner SVG POI bubble?

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!

SNÖGRAFX (snografx) Script Codes
Name
CityPlanner Logo Loading Animation 2017
Full page parallax
Mapbox centred
Layer spin
CSS Navigation buttons
Norkart CityPlanner ribbon logo
Vertical image scroller with hover arrows
Clickable back element
CSS X
Huzzo spinner
Create amazing web content 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!