I do this :
I need to separate the circle , I want to draw something like dart game, and I need to calculate the time that mouse still inside the circle.
If you can help me to do this ?
And how to make this responsive with mobile ?
And can any one build like this with android or react ?
html :
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()">
<div id="inner-circle1" onmouseover="htext()" onmouseout="stext()">
</div>
</div>
</div>
</body>
css :
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
js:
function stext() {
var x = document.getElementById("outer-circle");
x.style.background = 'blue';
}
function rest1() {
var x = document.getElementById("outer-circle");
x.style.background = '#385a94';
}
function htext() {
var x = document.getElementById("outer-circle");
var y = document.getElementById("inner-circle");
y.style.background = 'red';
x.style.background = 'blue';
}
You can use Date.now() at two times (mouseover & mouseout) and calculate difference.
Get time difference between two dates in seconds
Edit:
Here's the code. It's responsive and it haves perfectly centered circles.
css transform
css units (length)
Enjoy your code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
<style>
body {
margin: 0px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 100vmin;
width: 100vmin;
position: relative;
margin: auto;
}
#middle-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 60vmin; /*responsive */
width: 60vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*center the circle*/
}
#inner-circle {
position: absolute;
background: #f99;
border-radius: 50%;
height: 20vmin;
width: 20vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="middle-circle" onmouseover="htext()" onmouseout="stext()"></div>
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()"></div>
</div>
</body>
</html>
Related
I have an image inside a container. The image has object-fit contain set to it in order to maintain aspect ratio. It does this, but just shy away from perfect.
When I open the image in a new tab and compare it with the one in my browser, the browser image shows the slightest blurriness compared to the one in the new tab.
I've tried setting max-width, max-height, to the image and all gave the same result. The image dimensions ended up being different by a few decimal points which caused blurriness.
I want the image to be inside the container while maintaining aspect ratio like how it is in a new tab.
HTML
"use strict";
const $ = (selector) => document.querySelector(selector);
const gallery = $(".gallery").childNodes;
const slides = $("#my_modal").childNodes;
$(".gallery").addEventListener("click", evt => {
for ( let i in gallery ) {
if ( evt.target == gallery[i] ) {
$("#my_modal").style.display = "initial";
slides[i].style.display = "initial";
$("#my_modal").addEventListener("click", evt => {
if ( evt.target == $("#my_modal") ) {
$("#my_modal").style.display = "none";
slides[i].style.display = "none";
}
});
}
}
});
* { box-sizing: border-box; }
html {
margin: 0;
padding: 0;
color: white;
font-size: 16px;
}
body {
overflow: hidden;
background-color: black;
}
.gallery {
text-align: center;
}
.gallery img {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
}
.my_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
height: 90%;
width: 90%;
background-color: gray;
}
.my_slides img {
width: 100%;
height: 100%;
object-fit: contain;
}
<body>
<div class="gallery">
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="">
</div>
<div id="my_modal" class="modal">
<div id="boros1" class="my_slides">
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="">
</div>
</div>
</body>
Here is my JSFiddle https://jsfiddle.net/38rauwnf/
I suggest replicating on your machine in order to see the whole browser and opening the image in a new tab and comparing the images. The blue eyeball will be blurrier than the new tab.
Here is the image in the browser https://i.imgur.com/k2550RW.png
Here is the image in the new tab https://i.imgur.com/qwFybbj.png
EDIT: My problem has been solved on this post My images are blurry in Chrome but not Firefox w/ video demonstration
I want every element in my document to resize proportionally based on screen size and screen resizing..
please look at this Codepen.
and here is the article of the codepen.
In the Codepen you can see that the content is right at the center of the gray container and if you resize the gray container the content resizes proportionally and still at the center of the gray container right?
Now I want my whole document to behave like the gray container. the only difference is I want the content resize when the screen resizes not when user grab and resize the gray container. does it make sense?
So I created this container scale-container and I'll put every element inside it :
const $el = $("#scale-container");
const elHeight = $el.outerHeight();
const elWidth = $el.outerWidth();
window.addEventListener('resize', () => {
doResize();
});
function doResize(event, ui) {
let scale, origin;
scale = Math.min(getViewPortWidth() / elWidth, getViewPortHeight() / elHeight);
console.log(scale)
$el.css({ transform: `translate(-50%, -50%) scale(${scale})` });
function getViewPortWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
}
function getViewPortHeight() {
return Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
}
}
doResize();
body {
background: #ccc;
overflow: hidden;
margin: 0;
}
.scale-container {
/*fill whole screen if it's 1920*1080 */
width: 1536px;
height: 864px;
text-align: center;
background: white;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: center center;
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
.bigred {
color: red;
font-size: 5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="scale-container" id="scale-container">
<h1>I am designed just so.</h1>
<p>My design is intentional. I want to be scaled in such a way that scales the design. No reflows or anything, just straight up scaling. Kinda like SVG.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skull-and-crossbones.svg" alt="" />
<p class="bigred"> ✖ ✖ ✖ </p>
</div>
<script SRC="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" TYPE="text/javascript"></script>
<script SRC="script.js" TYPE="text/javascript"></script>
</body>
</html>
The issue is obvious, I want scale-container to fill the whole screen when it's possible (when the aspect ratio doesn't change) and I want it at the center of the screen ...
How can I fix this?
Try using this. in ./iframe.html, just use viewport units and you should be fine.
* {
padding: 0px;
border: 0px;
margin: 0px;
}
html {
width: 100vw;
height: 100vh;
}
body {
width: 100vw;
background-color: rgb(19, 19, 19);
}
div#mainContainer {
margin: calc((100vh - ((6/7) * 100vw)) / 2) 0px;
width: 100vw;
height: calc((6/7) * 100vw);
background-color: rgb(180, 180, 180);
z-index: 1;
}
iframe {
width: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio: 7/6) {
div#mainContainer {
margin: 0px calc((100vw - ((7/6) * 100vh)) / 2);
width: calc((7/6) * 100vh);
height: 100vh;
}
}
<html>
<head>
<title></title>
</head>
<body>
<div id="mainContainer">
<iframe src="./iframe.html"></iframe>
</div>
</body></html>
I have some code that displays 4 divs at a random hight at specified distances from the viewport sides, each div appears with a different delay speed and then moves around the page at random.
I want to add a delay to the movement of each div so they don't all start and stop moving at the same time but every time I add ad .delay() it breaks. Any help?
Thanks
HTML
<div class="content">
<div class="loopbox">
<div id="rand_pos" class="loop mobile box1">L</div>
<div id="rand_pos" class="loop mobile box2">O</div>
<div id="rand_pos" class="loop mobile box3">O</div>
<div id="rand_pos" class="loop mobile box4">P</div>
</div>
<div class="info">
<h1>COMING SOON</h1>
<p>info#loopstudio.uk</p>
</div>
</div>
*CSS
#import url('https://fonts.googleapis.com/css?family=Marcellus&display=swap');
*:focus {
outline: none;
}
html { overflow: hidden; }
body {
margin: 0;
background-color:#FFF9F3;
}
p,h1 {
font-family:sans-serif;
}
h1{
font-weight:100;
}
.loop {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size:22vw;
font-family:'Marcellus', serif;
font-weight:100;
color: black;
position: absolute;
}
.loop:hover {
animation: shake 0.82s cubic-bezier(.5,.01,.01,.05) 1;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.box1{
top:10vh;
left:8vw;
display:none;
}
.box2{
top:20vh;
left:30vw;
display:none;
}
.box3{
top:30vh;
right:35vw;
display:none;
}
.box4{
top:40vh;
right:10vw;
display:none;
}
.content {
position: relative;
height: 100vh;
width: 100vw;
margin: 0 auto;
resize: both;
}
.info {
width: 100%;
height:auto;
transform: translate(-50%, -50%);
position: fixed;
top: 50%;
left: 50%;
resize: both;
text-align:center;
z-index:-1000;
}
JS
$('document').ready(function(){
$('.box1').delay(500).fadeIn(850);
$('.box2').delay(1000).fadeIn(850);
$('.box3').delay(750).fadeIn(850);
$('.box4').delay(1250).fadeIn(850);
});
$('document').ready(function() {
var bodyHeight = document.body.clientHeight;
var randPosY = Math.floor((Math.random()*bodyHeight));
$('#rand_pos').css('top', randPosY);
});
$(document).ready(function(){
animateDiv('.box1');
animateDiv('.box2');
animateDiv('.box3');
animateDiv('.box4');
});
function makeNewPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(myclass){
var newq = makeNewPosition();
$(myclass).animate({ top: newq[0], left: newq[1] }, 8000, function(){
animateDiv(myclass);
});
};
I'm trying to make a kind of window which pops up when a customer add a product to his/her cart. This is what it would look like : Red and green divs are the background. There is a div which makes it darker (#overlay-daddy), and the white div is its child (#overlay).
Using JS I added an event listener on #overlay-daddy which (is supposed to) set its display property to none. My problem is it also triggers an event when I click on #overlay. Thanks in advance !
Here's my code :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function() { alert(this); });
</script>
</body>
</html>
You need to stop the event from being propagated. Just add e.eventPropagation() in the event listener for overlay.
var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');
overlay.addEventListener("click", function(e) {
e.stopPropagation();
});
dad.addEventListener("click", function() {
alert(this);
});
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
Also register a click handler on #overlay where you preventDefault();
Off the top of my head, that could look like this:
document.getElementById('overlay').addEventListener('click', function(e) {
e.preventDefault();
e.cancelBubble();
e.stopPropagation();
}, true);
Note that you probably don't need all three calls but it's been a while and my memory isn't clear on which you really need.
In order to disable the click event in the overlay's children, you need to test if the clicked element is the overlay itself, and not one of its children, with if(event.target===this) :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function(event) {
if(event.target===this) alert(this);
});
</script>
</body>
</html>
The click event on your 'overlay' element is being propagated to its parent. You can add event.stopPropogation of your 'overlay' element.
You may modify your overlay element like below.
<div id="overlay" onclick="event.stopPropagation();">
</div>
I guess your code need bottom and right in #overlay-daddy
#overlay-daddy {
position: absolute;
z-index: 3; // edited
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0; // added bottom
right: 0; // added right
}
So if you want to click in #overlay-daddy you need to set z-index for it greater than #overlay
I hope it can help you.
I would like to create a circle (without any animation) which is surrounded by other circles, like this:
but i would like to build in a phonegap app, so i don't want to increase the file size to big.
somebody know a plugin/method or any other solution?
I searched on the internet, but the methods i found are increase the size of my files too big.
No one addressed the javascript aspect of this question. Below is a complete (albeit quick and dirty) web page that will draw 6 perfectly spaced circles around a parent circle's center using html, css3, and javascript; it uses pure javascript so no need to reference a jquery library. You should be able to see how you could easily extract methods from the code to control the number of satellite circles, their distance from the center of the parent, parent and satellite radii, satellite offset, etc:
var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
for (var i = 1; i <= 6; ++i) {
var childdiv = document.createElement('div');
childdiv.className = 'div2';
childdiv.style.position = 'absolute';
var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
childdiv.style.top = (y + totalOffset).toString() + "px";
childdiv.style.left = (x + totalOffset).toString() + "px";
parentdiv.appendChild(childdiv);
}
#parentdiv {
position: relative;
width: 150px;
height: 150px;
background-color: #ac5;
border-radius: 150px;
margin: 150px;
}
.div2 {
position: absolute;
width: 40px;
height: 40px;
background-color: #ac5;
border-radius: 100px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="parentdiv"></div>
</body>
</html>
To make a circle, use border-radius: 50%. Then just position 6 circular divs with position: absolute around the larger circle.
Kind of like this: http://jsfiddle.net/yxVkk/
<div id="big-circle" class="circle big">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
<style>
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
position: absolute;
}
.circle.big {
width: 150px;
height: 150px;
background-color: blue;
margin: 100px;
}
.one {
left: -25px;
top: -25px;
}
.two {
top: -60px;
left: 50px;
}
.three {
right: -25px;
top: -25px;
}
.four {
left: -25px;
bottom: -25px;
}
.five {
bottom: -60px;
left: 50px;
}
.six {
right: -25px;
bottom: -25px;
}
</style>
Using css you can try something like that. but use circle tag of HTML5 will give you a better result.
http://jsbin.com/etuzis/1/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class=div2 style='top:12px; left:45px;'></div>
<div class=div2 style='top:4px; left:160px;'></div>
<div class=div2 style='top:94px; left:210px;'></div>
<div class=div1></div>
</body>
</html>
CSS
.div1{
margin:40px 10px 10px 50px;
position:relative;
width:150px;
height:150px;
background-color:#ac5;
border-radius:100px;
}
.div2{
position:absolute;
width:40px;
height:40px;
background-color:#ac5;
border-radius:100px;
}
Adding border-radius:50% to a <div> that has an equal with and height then putting a background-color on it will make a circle out of CSS (light load).
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
}
You can then absolutely position the circle directly in the middle of the screen by using the position:absolute and negative margin trick.
.big_circle {
width:10em;
height:10em;
border-radius:50%;
background-color:blue;
position:absolute;
top:50%;
left:50%;
margin-left:-5em;
margin-top:-5em;
}
Create a class to take care of the styling for the smaller circles.
.little_circle {
width:3em;
height:3em;
border-radius:50%;
background-color:green;
position:relative;
}
Then add IDs (or any other way of identifying them) to position the relatively compared to the big circle.
#little_one {
bottom:1em;
right:2em;
}
#little_two {
bottom:6.5em;
left:3.5em;
}
#little_three {
bottom:7em;
left:9em;
}
// etc...
Here's a CodePen with a sample.
As somebody said in the comments, you have to set border-radius:50% and then, positioning absolutely. I've made a dummy jsfiddle for illustrate link:
circle{
width : 50px;
height : 50px;
border-radius : 50%;
background: red;
position : absolute;
top : 50px;
left : 150px;
}
.small_circle_1{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : -25px;
left : 15px;
}
.small_circle_2{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : -25px;
}
.small_circle_3{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 55px;
left : 15px;
}
.small_circle_4{
width : 20px;
height : 20px;
border-radius : 50%;
background: blue;
position : absolute;
top : 15px;
left : 55px;
}
To display a radial array of items, center them and use trigonometry to rotate them around the center. This assumes all the items share the same width and height.
Notes about this approach:
Multiple radials can reuse the JS function in a wide variety of configurations
There should only be one .radial_center (though the code could be updated to allow multiple layered centers, taking the diameter of the largest for calculations)
There can be multiple .radial_edge items, and the function automatically adjusts the angle of rotation
Trig functions and coefficients are adjusted so the first edge is always on top
data fields in the .radial wrapper can manually set diameters for the center and edge items, as well as the percentage gap between them, which calculates to the radius for the edge items from the center item
The center item can be hidden to create a "ring only" effect, though the center still needs to exist
Yes, any code written in jQuery or any other lib can be re-written in vanilla (or asm or binary). I just used jQuery for my own convenience :)
const ns = {
radial: (r) => {
//capture radial edges
let el = $(r),
e = el.children('.radial_edge');
//avoid div zero
if (e.length) {
//calc orbital angle and radius
let c = el.children('.radial_center'),
sa = -360 / e.length, //-360 rotates clockwise, 360 rotates counter
i = 0, //0 sets first child at top
cw = el.data('center') || c.width() || 100,
ew = el.data('edge'),
gap = el.data('gap') || .2;
//calc x,y and reposition each edge
e.each(function() {
let re = $(this),
ewa = ew || re.width() || 50,
rad = (cw + ewa) * (1 + gap),
x = Math.cos((sa * i) * (Math.PI / 180)) * rad * -1, //-1 flips vertically
y = Math.sin((sa * i) * (Math.PI / 180)) * rad * -1;
re.css({
inset: x + 'px 0 0 ' + y + 'px'
});
i++;
});
}
}
}
$(document).ready(() => {
//parse each radial group
$('.radial').each(function() {
ns.radial(this);
});
});
:root {
/* decorative */
--bs: 1px 1px 3px 0px grey;
--b-soft: thin solid silver;
font-family: monospace;
color: gray;
}
img {
display: block;
}
.hidden {
display: none;
}
.examples {
display: flex;
flex-wrap: wrap;
}
.radial {
/* required */
position: relative;
/* dev only */
margin: 1em auto;
border: 1px solid lightgray;
width: 350px;
aspect-ratio: 1/1;
border-radius: 50%;
}
.radial_center {
/* required */
width: fit-content;
aspect-ratio: 1/1;
position: absolute;
inset: 50%;
transform: translate(-50%, -50%);
/* decorative */
border-radius: 50%;
box-shadow: var(--bs);
border: var(--b-soft);
}
.radial_edge {
/* required */
position: absolute;
width: 50px;
aspect-ratio: 1/1;
margin: auto;
/* decorative */
border-radius: 50%;
box-shadow: var(--bs);
border: var(--b-soft);
opacity: .7;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 2em;
}
.bigger .radial_center {
width: 150px;
}
.bigger .radial_edge {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="examples">
<div class="radial" data-gap=".3">
<img class="radial_center" src="https://picsum.photos/100" alt="center image" />
<div class="radial_edge">1</div>
<div class="radial_edge">2</div>
<div class="radial_edge">3</div>
<div class="radial_edge">4</div>
<div class="radial_edge">5</div>
</div>
<div class="radial bigger" data-gap=".05">
<img class="radial_center" src="https://picsum.photos/150" alt="center image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
<img class="radial_edge" src="https://picsum.photos/100" alt="satellite image" />
</div>
<div class="radial" data-center="75" data-edge="75">
<div class="radial_center hidden"></div>
<div class="radial_edge">1</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="1" />
<div class="radial_edge">3</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="2" />
<div class="radial_edge">5</div>
<img class="radial_edge" src="https://picsum.photos/50" alt="satellite image" data-pos="3" />
</div>
</div>